vue-cli3.0 配置本地和线上跨域配置

Jsky
2019-11-09 15:25:59
前端
js Vue

看了网上很多这方面的配置，一直都没成功，自己研究了下，然后测试，可以使用，所有进行记录下。

一：本地配置

修改vue.config.js配置文件，没有的话在根目录下创建一个 vue.config.js文件,内容如下，如果需要添加或者删除的自行修改

'use strict'
module.exports = {
  publicPath: "/",
  outputDir: "dist",
  assetsDir: "assets",
  filenameHashing: false,
  lintOnSave: process.env.NODE_ENV !== 'production',
  productionSourceMap: false,
  devServer: {
    host: "0.0.0.0",//这里是本地打开的方式  localhost：自己打开，  0.0.0.0：自己打开，同时在局域网内，别人也能通过IP访问你的项目
    port: 1888, // 端口号
    https: false,
    open: true, //配置自动启动浏览器
    proxy: {
      // 此处应该配置为开发服务器的后台地址
      // 这里/api 自己任意填写
      //但是需要和下面pathRewrite和 axios配置跨域需要一致，发布到线上的时候,nginx服务器需要一致
      '/webapi': { 
        target: 'http://www.baidu/webapi', //接口API域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
          //这里'/webapi'和上面的 /webapi 一致，
          //这里可以理解成用 '/webapi' 代替target里面的地址,比如我要调用'http://www.baidu/webapi/add'，访问会变成'/webapi/add'
          '^/webapi': '' 
        }
      }
    },
  }
};

2.修改 main.js

2.1：引入

import $axios from 'axios'

2.2：这里'/api'需要和config 中的一致

//配置跨域
$axios.defaults.baseURL = '/webapi';
$axios.defaults.headers.post['Content-Type'] = 'application/json';

这时候本地跨域已经可以访问了，vue修改配置文件，记得需要重启下项目，不然不能生效

二：线上部署

如果在同域名下则不需要进行配置跨域

如果不在同域名下则需要进行配置下方

打包 build后上传线上服务器，这时候需要进行配置 nginx 服务的代理，

修改nginx.conf配置文件

#配置vue 线上部署 代理
#这里 /webapi 和vue.config.js 中的需要一致
#这里 proxy_pass 和 vue.config.js中的 target 要一样
#Content-Type  根据自己需求修改， 最好和 axios 中的一致

#服务器配置
    server {
        listen       80;
        server_name  localhost www.baidu,com;
 
	client_max_body_size 10M;
	client_body_buffer_size 128K;
         
        #配置vue 线上部署 代理
	location / {
		try_files $uri $uri/ /index.html;
	}
	        
	location /api {
		proxy_pass   http://localhost:8901/index.php;
		add_header Content-Type "application/json;charset=utf-8";
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST';
        }
    }

到这里，vue 的本地和线上配置以及完成，可以正常访问了。

本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link