vue CORS 跨域问题的终极解决方案

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
- - 解决方案：服务端nginx直接把接口请求，代理转发到内网的IP，来欺骗客户端的浏览器，让浏览器以为是同源的

前言

一般情况下跨域问题，请参考这篇文章解决：
https://blog.csdn.net/abs1004/article/details/76895652

CORS private 外网访问内网的跨域问题，跨域问题的终极暴力解决方案

Access to XMLHttpRequest at 'http://10.1.1.1:8080/web-api/login' from origin 'http://xxx.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private

此场景（公网请求私网）后端添加放行了也会报错。

场景如下：
前端部署后，前端页面可以通过公网IP(域名）的形式访问。
但是调用的接口却是内网IP的，于是就报错了：

其中的 “http://10.1.1.1:8080” 就是内网IP，
“The request client is not a secure context and the resource is in more-private address space private” 这段话通俗的解释就是：客户端的请求由于安全和私密等级不够而拒绝了请求。

提示：以下是本篇文章正文内容，下面案例可供参考

解决方案：服务端nginx直接把接口请求，代理转发到内网的IP，来欺骗客户端的浏览器，让浏览器以为是同源的

一、第一步：配置nginx
ssh登录前端服务器
修改nginx.conf，或者是虚拟域名对应的.conf （比如：www.baidu.com.conf) 文件
添加配置如下：

 location /web-api/ {
        proxy_pass   http://10.1.1.1:8010/web-api/;
    }

注意：/web-api/ 必须改成实际的接口网址，比如你的项目接口网址是：http://10.2.2.2:8088/theApi/xxx, 那么你应该这样修改配置为：

 location /theApi/ {
        proxy_pass   http://10.1.1.1:8010/theApi/;
    }

然后重新挂载nginx配置

 nginx -s reload

或者不放心的话，重启nginx服务

service nginx restart

OK,服务端配置改完了。

第二步：但是你的代码里需要把写死的接口请求的地址都去掉改成 “/web-api/xxx” 的这种相对路径的方式

比如原来你在 prod.env.js 里配置了接口基础网址：

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://10.1.1.1:8080"', // prod
  HOST: "localhost"
};

那么就需要改为：

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '', // prod
  HOST: "localhost"
};

改完后重新上传代码，然后浏览器里试试吧，红色的CORS错误终于消失了。

vue CORS 跨域问题 的终极解决方案

Linux相关栏目本月热门文章

vue CORS 跨域问题的终极解决方案