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

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


前言

一般情况下跨域问题,请参考这篇文章解决:
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错误终于消失了。

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值