nginx解决跨域问题

Posted 2021-12-04 givenchy_yzl

nginx解决跨域问题

在项目开发中，我们很常见的一个问题是，本地是localhost开发的，接口一般是给IP地址，例如http://192.168.13.14/api, 这样直接在项目中调用接口 浏览器会报跨域错误， 因为localhost和http://192.168.13.14并不是同源的。

一般我们的解决方法是在webpack中设置代理，配置devServer:

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://192.168.13.14/api',
                changeOrigin : true
            }
        }
    }
}

设置以后，在接口访问 假设为http://localhost:8080/api时，会转发到http://192.168.13.14/api去.
所以，如果不是通过devServer的方式，该怎么做呢？

接手的项目就没有配置webpack devServer，仔细看是设置了Access-Control-Allow-Origin: http://localhost:8054来解决接口跨域的，但是，这个项目的鉴权方式是cookie, 这里地址http://localhost:8054和接口地址不同源导致cookie设置失败

那么现在的想法要让浏览器地址与接口地址同源，那么cookie自然能够设置成功了！

可以通过配置nginx来实现。

配置：

server {
    listen 8055 {
        // 步骤1 
        location / {
            proxy_pass: http://localhost:8054/;
        }
        // 步骤2
        location /api {
            proxy_pass: http://192.169.13.14;
        }
    }
}

我访问的地址本来是http://localhost:8054, 这里我监听8055端口。

步骤1 做地址的代理，当访问http://localhost:8055时，会映射到http://localhost:8054
步骤2 做接口的代理，当访问http://localhost:8055/api/xxxx时，会映射到http://192.169.13.14/api/xxxx
还有一步，在项目中，要动态配置接口地址：

const apiAddress = window.location.protocol + '//' + window.location.host + '/api';

这样，浏览器地址与接口地址就都是localhost:8055开头的，不存在跨域的问题，cookie就能成功设置