vue2.0跨域访问 开发和部署环境下 配置方法

1、开发环境下：

通过vue_cli脚手架生成的vue项目，有时会生成config文件夹，里面会有个index.js文件，如果没有我们可以再项目根目录下新建vue.config.js文件，内容设置如下：

module.exports = {

  devServer: {
      proxy: {  //配置跨域
        '/api' : {
          target: 'http://10.0.0.105:5590', //这里后台的地址应该填写你们真实的后台接口
          changOrigin: true,  //允许跨域
          pathRewrite: {
            /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
              实际上访问的地址是：http://10.0.0.105:5590/core/getData/userInfo,因为重写了 /api
            */
            '^/api': '' 
          }
        },
      }
    },
}

2、部署环境下：

通过npm run build打包后会生成dist文件夹，把dist文件夹下所有内容复制到nginx-1.21.3\html 路径下，然后修改nginx-1.21.3\conf\下的nginx.conf，增加如下内容，然后重启服务：

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
         
        #以下为新增，根据自己后端接口修改为自己的
		location /api { #添加访问目录为/api的代理配置,使以“/api”开头的地址都转到“http://192.168.1.111:8080”上
			rewrite  ^/api/(.*)$ /$1 break;
			proxy_pass   http://10.0.0.105:5590;
        }

        如果您觉的本文对你有帮助或者启发，请在文章结尾顶一下文章或者使用微信向我赞赏，您的支持是我完善本文和帮助学习的朋友最大的动力。