关于前端:nginx解决跨域

32次阅读

共计 1046 个字符,预计需要花费 3 分钟才能阅读完成。

在我的项目开发中,咱们很常见的一个问题是,本地是 localhost 开发的,接口个别是给 IP 地址,例如 http://192.168.13.14/api, 这样间接在我的项目中调用接口 浏览器会报 跨域谬误 ,因为localhosthttp://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就能胜利设置

正文完
 0