image.png
查了一下，是遇到跨域访问问题了。
前端这里就是一个简单的post提交数据（简化了）：
<template>
<div id="app">
<div>
<button @click="handleSubmit">提交</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
methods: {
handleSubmit () {
this.$axios({
url: '/',
method: 'post',
data: {"date": "test1", "mission": "test2", "level": "test3"},
}).then((res) => {
console.log(res)
// res.data.data.push(this.updatelist)
}).catch((err) => {
console.log(err)
})
}
}
</script>
<style>
</style>
这里如果我在axios的config中设置data，就会触发上面那个问题；如果把data注释掉，这个问题就消失了。
经查得知是要在vue.config.js中进行设置（我用的是vue-cli3，所以直接新建一个vue.config.js文件）。
module.exports = {
devServer: {
proxy: {
'/api/*': {
target: 'http://yapi.demo.qunar.com/mock/97476/test/handlesubmit',
// ↑这个就是你的接口地址↑
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
}
}
配置完成后，再去App.vue中，把handleSubmit的axios中的url改成：'/'。
image.png
修改后刷新，还是No 'Access-Control-Allow-Origin' header is present on the requested resource.
在搜到https://blog.csdn.net/qq_27295403/article/details/88531783后
发现了一个问题：
image.png
但我并没有重新npm run serve。
......
( ´_ゝ`)
手动执行npm run serve后
image.png
......
是怎么发现这个问题的呢？
在不断的搜索中，打开了一个帖子：
https://www.cnblogs.com/l-y-h/p/11815452.html
仿照这个做了一个用于测试的例子：
App.vue
<template>
<div id="app">
<button @click="testaxios">测试跨域</button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
methods: {
testaxios () {
this.$axios({
url: '/',
method: 'get'
}).then((res) => {
console.log(res)
}).catch(() => {
alert('失！败！')
})
},
}
</script>
<style>
</style>
vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
// 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
target: 'https://www.baidu.com',
// 允许跨域
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
但是仍访问失败，那么问题应该就不是没有配置的问题了（也不是网站的问题，也不是编译器的问题）。并且这时候有一个新的问题，访问的时候返回404：
image.png
搜了一下关于pathRewrite无效的问题，但并没有像我这样的。
直到发现要再手动执行npm run serve一次.......( ´_ゝ`)
所以就是说，进行vue.config.js配置之后，就算在当前页面刷新，相关设置也并没有在当前项目中生效，需要npm run serve重新跑一次之后才能生效。
关于跨域问题：
http://www.ruanyifeng.com/blog/2016/04/cors.html
https://www.cnblogs.com/ysocean/p/9380551.html
https://www.cnblogs.com/l-y-h/p/11815452.html
https://blog.csdn.net/qq_27295403/article/details/88531783
更具体的参照这几个链接更改就行，亲测有效。
( ´_ゝ`)
