网上方法千千万，由己验明知真假。———— 只灯片笺（简书ID）
本文主要内容：
1. 原为解决跨域问题而配置的文件；
2. 引发跨域问题，错误的网络请求方法；
3. 解决 Vue.js 中 axios 发起网络请求 的 跨越问题；
最近，用
vue.js编写的前端项目，已近进入到了数据对接的阶段，遂开启了网络的请求；
本以为配置了跨域文件，没啥问题了。
没想到，还是一招不慎，掉入坑里。故而，有此笔记，做一记录。
错误内容如图所示：
error.png
1. 原为解决跨域问题而配置的文件；
vue.config.js (每次更改完配置文件，记得运行npm run serve命令，进行重启，不然你会陷入极度的郁闷中，为什么不生效。)
vue.config.js，这个文件是自己创建的，为了解决vue-cli 3.0版本下的跨域问题；
特别需要注意的是，proxy中的target配置；
// vue.config.js，这个文件是自己创建的，为了解决vue-cli 3.0版本下的跨域问题；
// 特别需要注意的是，proxy中的target配置；
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
proxy: {
/*
* 配置跨域；配置多个跨域；
* 需要重启，方能生效；
*/
// paths
'/ssa-ui/api': {
target: 'http://xx.xx.xx.xxx:xxxx/ssa-ui/api', //跨域地址
changeOrigin: true, // 是否跨域
ws: true, // 是否使用https
pathRewrite: {
'^/ssa-ui/api': ''
// 此处可以理解为 '/ssa-ui/api' 代替了 target 里面的地址，后面的组件中，调用接口的时候直接用 /ssa-ui/api 替代
// 比如，调用 http://xx.xx.xx.xxx:xxxx/ssa-ui/api/query-engine/line-chart ，直接写 /ssa-ui/api/query-engine/line-chart 即可
}
},
'/api': {
target: 'http://xx.xx.xx.xxx:xxxx/api', //跨域地址
changeOrigin: true, // 是否跨域
ws: true, // 是否使用https
pathRewrite: {
'^/api': ''
// 此处可以理解为 '/api' 代替了 target 里面的地址，后面的组件中，调用接口的时候直接用 /api 替代
// 比如，调用 http://xx.xx.xx.xxx:xxxx/api/row4 ，直接写 /api/row4 即可
}
}
},
before: app => {
}
}
http.js
// 如文件名叫http.js
import axios from 'axios'
// 创建实例时设置配置的默认值
var instance = axios.create({
// http://10.10.12.229:9011/api/
// baseURL: 'http://10.10.12.229:9011/api/',
timeout: 5000,
// 加入：'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'，
// 解决 provisional headers are shown 问题，以及数据不出现的问题；
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8;',
Accept:'application/json'
},
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
/**
1、比如添加token之类的请求头信息
2、添加每次请求loading等
*/
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
/**
1、集中处理响应数据（如错误码处理）
*/
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default instance
main.js
// 引入网络请求
import http from './http'
Vue.prototype.$http = http
2. 引发跨域问题，错误的网络请求方法；
请求数据方法：
export default {
name: "SafeThingTrendLineChart",
methods: {
getData() {
this.$http({
method: 'GET',
url: 'http://xx.xx.xxx.xxx:xxxx/ssa-ui/api/query-engine/pie-chart',
}).then((response) => {
// 200响应
console.log(response);
}, (err) => {
// 500响应
console.log(err);
})
},
}
}
3. 解决 Vue.js 中 axios 发起 网络请求 的 跨域问题；
为什么上一个写法会有错误呢？
因为在vue.config.js 的配置中，target 设置的是需要访问的 API 的域名，配置结束后，如果需要访问https://xx.x.x.x/api/xxxx/xxx，只需要将访问的链接地址设置为/api/xxxx/xxx即可，webpack会进行转发。
即如下所示。
改进后的 请求数据方法：
export default {
name: "SafeThingTrendLineChart",
methods: {
getData() {
this.$http({
method: 'GET',
url: '/ssa-ui/api/query-engine/pie-chart',
}).then((response) => {
// 200响应
console.log(response);
}, (err) => {
// 500响应
console.log(err);
})
},
}
}
成功请求.png
