【Nginx】使用Nginx完美解决前端跨域问题

最新推荐文章于 2025-01-15 15:40:54 发布

原创最新推荐文章于 2025-01-15 15:40:54 发布 · 1.0k 阅读

0 ·

CC 4.0 BY-SA版权

本文为【tanpenggood】原创文章，允许转载，但转载必须注明出处并附带首发链接！

NGINX系列专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何通过配置Nginx服务器解决前端开发中常见的跨域问题。通过设置代理转发，可以将跨域请求转化为本地请求，从而避免浏览器的CORS限制。此方法适用于各种前端项目。

前端开发时，我们调用接口大部分都是跨域的，然后浏览器就会报CORS问题，导致我们不能正常调用接口拿到响应数据。
今天我们来使用Nginx完美解决前端跨域问题，学会了这个方法，以后所有的跨域问题在我们面前都不是问题了。

talk is cheap, show me the code.

使用Nginx转发请求，把跨域的接口写成调本域的接口，然后将这些接口转发到真正的请求地址。

server {
    listen       8888;
    server_name  localhost;
    location / {
        proxy_pass http://localhost:8080;
        proxy_redirect default;
    }
    location /api {
        proxy_pass http://api.itplh.com;
        proxy_redirect default;
    }
}

最后，访问页面使用http://localhost:8888

请求接口使用http://localhost:8888/api/**

就不存在跨域啦。

参考：如何用Nginx解决前端跨域问题？