如何利用Nginx处理Vue开发环境的跨域

  介绍

这篇文章主要为大家展示了“如何利用Nginx处理Vue开发环境的跨域”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何利用Nginx处理Vue开发环境的跨域”这篇文章吧。

<强> 1。需求

本地测试域名与线上域名相同,以便正确传递饼干和进行SSO测试。

注:由于SSO登录后,相关饼干被加在四级域名上,因而需要做到本地测试域名和线上接口域名相同。

<强> 2。方案

配置主机文件使线上域名指向Localhost:

<代码> 127.0.0.1 product.xxx.xxx.com

配置Nginx进行对应转发:

server  {   listen 才能,,,,80;   listen 才能,,,,[:]:80;   server_name 才能;$ {product.xxx.xxx.com};      的位置才能/api  {   ,,,proxy_pass  https://$ {ip.ip.ip.ip};   ,,,proxy_set_header  Host  $主机;   ,,}      的位置才能/,{   ,,,proxy_pass  http://localhost: 8080;   ,,,proxy_set_header  Host  $主机;   ,,},   }

配置vue.config。js以免出现无效的主机头报错:

{   ,,devServer: {   ,,,disableHostCheck:真实   ,,}   }

以上是“如何利用Nginx处理Vue开发环境的跨域”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

如何利用Nginx处理Vue开发环境的跨域