通过vue dev和nginx反向代理实现跨域

执笔看墨花开

已于 2022-07-25 14:46:19 修改

阅读量2.2w

点赞数 5

分类专栏： vue 文章标签： nginx vue 跨域

于 2017-12-12 00:25:51 首次发布

本文链接：https://blog.csdn.net/qq_31201781/article/details/78778193

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

一、在vue的开发环境中跨域

vue-cli5

官方文档
找到vue.config.js。

devServer: {
    proxy: {
      '/api': {
        target: 'http://fanyi.baidu.com/v2transapi/api',//代理目标
        changeOrigin: true,
      },
    },
  },

如上配置，比如使用百度翻译api，那么这样写的实际使用等于访问

http://fanyi.baidu.com/v2transapi/api?+参数

npm run dev之后请求http://localhost:8080/api?from=zh&to=jp&query=爱&simple_means_flag=3
相当于http://fanyi.baidu.com/v2transapi/api?from=zh&to=jp&query=爱&simple_means_flag=3

二、在生产环境中跨域

设置nginx配置文件：

location /api {
	    add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://fanyi.baidu.com/v2transapi;
    }  
 代理本机端口
location /api2 {
        proxy_pass http://localhost:9001/;
    }

代码不用变，结果ok，