利用Nginx处理Vue开发环境的跨域的方法
程序员文章站
2022-07-07 11:45:42
1. 需求
本地测试域名与线上域名相同,以便正确传递 cookie 和进行 sso 测试。
注:由于 sso 登录后,相关 cookie 被加在四级域名上,因而需要...
1. 需求
本地测试域名与线上域名相同,以便正确传递 cookie 和进行 sso 测试。
注:由于 sso 登录后,相关 cookie 被加在四级域名上,因而需要做到本地测试域名和线上接口域名相同。
2. 方案
配置 host 文件使线上域名指向 localhost:
127.0.0.1 product.xxx.xxx.com
配置 nginx 进行对应转发:
server { listen 80; listen [::]:80; server_name ${product.xxx.xxx.com}; location /api { proxy_pass https://${ip.ip.ip.ip}; proxy_set_header host $host; } location / { proxy_pass http://localhost:8080; proxy_set_header host $host; } }
配置 vue.config.js 以免出现 invalid host header 报错:
{ devserver: { disablehostcheck: true } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Docker 数据卷操作的实现
推荐阅读
-
webpack+vue-cil中proxyTable处理跨域的方法
-
利用nginx解决cookie跨域访问的方法
-
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
-
利用Nginx处理Vue开发环境的跨域的方法
-
vue-cli开发时,关于ajax跨域的解决方法(推荐)
-
vue开发环境配置跨域的方法步骤
-
Vue-cli proxyTable 解决开发环境的跨域问题详解
-
vue-cli开发环境实现跨域请求的方法
-
个人笔记 -- Axios封装原理、console.log()和console.dir()的区别、开发环境解决跨域问题、Vue设置全局自定义指令、cookies和localstorage区别
-
Nginx服务器中处理AJAX跨域请求的配置方法讲解