[JavaScript知识库]跨域，为解决跨域的代理原理是什么？vue2中如何配置跨域

在js使用ajax请求后台接口的数据时，新人会遇到跨域问题，也许你已经通过百度，知道了怎么通过代理解决跨域问题，那么，原理是什么？
当遇到跨域情况时，控制台会有以下类似的报错

*Access to XMLHttpRequest at ‘xxxxxxxxxxxxxxxxx’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No
‘Access-Control-Allow-Origin’ header is present on the requested
resource.

为更好的演示跨域和代理，直接上图

代理的原理，就是这样的。
接下来附上vue配置跨域的代码

//在于src同级目录创建vue.config.js
module.exports = {
    devServer:{
        open:true,
        proxy: {
        //这个/api要用字符串形式，意思是检测到请求中有这个东西，就进行代理
            '/api': {
            	//target是要代理的目标地址，也就是后台接口地址
                target: 'http://121.89.233.78:8080/v1/',
                //这个是把请求头中的host字段也改变，host字段默认也是本地地址，
                //开启这个，host字段也会改变
                changeOrigin: true,
                //最后这个，是把请求中的指定字段替换掉
                //例如：/api这个开头，我只是想用来开启代理，真正的接口中并没有这个东西，
                //那就可以把这个东西替换成/
                pathRewrite: {
                  '^/api': '/'
                }
              }
        }
    }
}

更多关于同源策略，代理，vue.config.js的内容，百度吧，少年