使用nginx代理解决web请求本地服务器跨域问题

使用nginx代理解决web请求本地服务器跨域问题

使用nginx代理访问Vue项目

工具：nginx-1.8.0.zip

场景描述：我们在搭建本地web项目时候，有时候想要请求一下本地搭建的服务等，这个时候浏览器在请求数据时候，会有跨越的问题，跨越：域名不同，IP不同，端口不同，都会形成跨域请求。

浏览器 =>服务器=>数据库

原调试页面：http://localhost:3000/

请求地址：http://localhost:8070/VueServer/vue/getNewsList.do

因为3000端口和8070端口不是同一端口，所以浏览器会报：

Access to XMLHttpRequest at 'http://localhost/VueServer/vue/getNewsList.do' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是跨域请求导致的错误。

为了解决跨域的错误，我们使用nginx请求转发来解决跨域问题。

浏览器 =>nginx=>服务器=>数据库

在windows中将nginx-1.8.0.zip直接解压，双击nginx.exe，在浏览器中访问：localhost:80，出现welcome nginx即可。

如果80端口被占用，将conf文件中的nginx.conf文件端口修改后重启便可。

在cmd中进入nginx.exe的目录，如：cd E:\nginx\nginx-1.8.0，再敲命令：nginx -s reload//重启

nginx -s stop//停止nginx
nginx -s reload//重启

这里要特别注意浏览器缓存问题，基本上你nginx -s stop后，浏览器任然能打开nginx，是因为缓存问题，请每次重启后清除缓存。

原始：

​ 原调试页面：http://localhost:3000/

​ 请求地址：http://localhost:8070/VueServer/vue/getNewsList.do

步骤1：

​ 修改请求地址：http://localhost:80/VueServer/vue/getNewsList.do（将端口修改成nginx监听的端口：80）

步骤2：

​ 修改nginx.conf配置

 server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            proxy_pass http://127.0.0.1:3000;#这里是原调试页面地址，也很重要，不能不配置
            index  index.html index.htm;
        }
 
        #转发到Vue本地服务器
        location ~/VueServer\/vue\/(.*)\.do$ {
         proxy_pass http://127.0.0.1:8070/VueServer/vue/$1.do;#这里是后台服务的请求地址
        }
}

重启nginx,清理浏览器缓存。

步骤3：

调试页面不再访问：http://localhost:3000/，如果还是访问3000，还是会有跨域问题。

而是访问：http://localhost:80，nginx会在location中自动转发到http://localhost:3000/，

这样我们调试的地址是：http://localhost:80，请求的也是：http://localhost:80，即解决了跨域的问题。