记遇到的一个坑：No 'Access-Control-Allow-Origin' header is present on the requested resource.

在用axios向yapi的接口提交数据的时候遇到了一个问题：

image.png

查了一下，是遇到跨域访问问题了。

前端这里就是一个简单的post提交数据（简化了）：

这里如果我在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

cao.
......
是怎么发现这个问题的呢？
在不断的搜索中，打开了一个帖子：
https://www.cnblogs.com/l-y-h/p/11815452.html
仿照这个做了一个用于测试的例子：
App.vue

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

它把我的url换成了http://localhost:8080，但我并没有进行这个设置，那么可能就是pathRewrite没有生效的问题。

搜了一下关于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

更具体的参照这几个链接更改就行，亲测有效。
( ´_ゝ`)