主页 > 知识库 > 利用Nginx处理Vue开发环境的跨域的方法

利用Nginx处理Vue开发环境的跨域的方法

热门标签:智能电话机器人线路 贺州市地图标注app 东莞人工智能电销机器人供应商 长沙开福怎么申请400电话 广州电销机器人系统图 百度地图标注要不要钱 江苏电销外呼防封系统是什么 金融行业外呼线路 高德地图标注无营业执照

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
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

标签:玉树 张家界 洛阳 松原 北京 沧州 廊坊 永州

巨人网络通讯声明:本文标题《利用Nginx处理Vue开发环境的跨域的方法》,本文关键词  利用,Nginx,处理,Vue,开发,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《利用Nginx处理Vue开发环境的跨域的方法》相关的同类信息!
  • 本页收集关于利用Nginx处理Vue开发环境的跨域的方法的相关信息资讯供网民参考!
  • 推荐文章