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

文章目录

• 前言
• • • 解决方案：服务端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/;
    }
1
2
3

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

 location /theApi/ {
        proxy_pass   http://10.1.1.1:8010/theApi/;
    }
1
2
3

然后重新挂载nginx配置

 nginx -s reload
1

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

service nginx restart
1

OK,服务端配置改完了。

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

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

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

那么就需要改为：

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '', // prod
  HOST: "localhost"
};
1
2
3
4
5

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

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦