经常使用vue + webpack搭建项目，但在请求某些json数据时存在跨域问题，此时有几种修改方法
1. 修改后台header， 但如果只是请求外部数据，是没法修改后台配置的
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
2. 修改webpack配置 , 这是使用webpack选项devServer的代理功能 proxy
proxyTable: {
'/api': {
target: '填写请求源地址', //源地址
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //路径重写
}
}
}
注意：如果不设置pathRewrite则可能会出现以上报错
另外：proxyTable是在vue-cli2.0项目中config/index.js配置好的选项， 实际上它指向build/webpack.dev.config.js中的devServer.proxy
在新版的@vue/cli中（即vue-cli3.0）没有直接暴露出webpack的配置，只需在根目录下自行创建vue.config.js然后配置如下
module.exports = {
devServer: {
proxy: {
'/api': {
target: '填写请求源地址',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
最后一般在组件中使用axios或者fetch请求本地服务即可，此时外部数据已经被转到了本地服务器中
axios.get('/api/xxx')
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
fetch('/api/xxx', {
method: 'GET',
headers: {
'content-type': 'application/json'
},
mode: 'no-cors'
})
.then(res => res.json())
.then(json => {
console.log(json)
})
3.使用jQuery的JSONP()
$.ajax({
url: '请求的源地址',
type: 'GET',
dataType: 'JSONP',
success(res) {
console.log(res)
}
})