使用vuecli + webpack进行项目开发时,遇到了需要跨域访问的情况,这里简单记录一下前端的跨域配置,如下:
1、配置本地代理
修改config
文件夹下的index.js
文件中的dev
下的proxyTable
属性,如下:
...
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:8888',//后端接口地址
changeOrigin: true,//是否允许跨越
pathRewrite: {
'^/api': '',//重写,
}
}
},
host: 'localhost',
port: 8080,
autoOpenBrowser: false,
...
}
...
使用时,只需在需要跨域的url
前加上/api
的前缀,在访问时proxyTable
会自动拦截并进行转换;如:当我们的api
为/getDataList
时,我们在用axios
调用是需要写成/api/getDataList
,那么在访问时,我们在network
下看到的访问地址为:http://localhost:8080/api/getDataList
,而真实的访问地址为:http:localhost:8888/getDataList
;
这是因为我们浏览器交互的永远是我们本地的服务,当我们设置代理后,本地服务器会与另外的服务器(也就是我们要跨域访问的服务器)进行交互,并将获取到的数据返回给浏览器;
注:如果只配置这一步,跨域仅在开发环境中生效,如果 想要在生产环境中配置,需要继续下面的步骤;
2、生产环境下配置
axios
的默认实例有一个baseURL
的属性,配置了baseURL之后,你访问接口时就会自动带上,所以我们可以根据当前的环境是开发环境还是生产环境来配置不同的baseURL
,方法如下:
可以在config
文件夹下新建一个api.config.js
文件,内容如下:
//判断是否是生产环境
var isPro = process.env.NODE_ENV === 'production' //process.env.NODE_ENV用于区分是生产环境还是开发环境
//配置不同的baseURL
module.exports = {
baseURL: isPro ? 'http://xxx:xxxx' : '/api'
}
process.env.NODE_ENV
用于区分是生产环境还是开发环境,这个值是webpack设置的
3、设置axios的baseURL
在入口文件中引入axios
和api.config.js
文件,如下:
// 入口文件 main.js
import Vue from 'vue'
import axios from 'axios'
import apiConfig from '../config/api.config.js'
axios.defaults.baseURL=apiConfig.baseURL
...
这样配置之后,打包部署到服务器上也不用再手工去除/api
按照上述步骤配置完成后就可以实现在开发环境和生产环境下的跨域访问了,