解决跨域问题的三个办法

在本文中笔者将解决以下两个问题：

1. 什么是跨域？
2. 解决跨域的三个方法

1.什么是跨域问题？

当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。

跨域问题是由于浏览器为了安全而采取同源策略而造成的。

同源策略，Same Origin Policy，是由Netscape提出的一个著名的安全策略。简单来说，就是要求发起请求的地址同资源所在的地址中域名、端口以及协议完全一致。

2.前端解决跨域问题的三种办法

（1）Jsonp：利用script等标签内部发起请求不受同源策略限制的特点来实现跨域，其特点是相应数据为js脚本而非json，仅支持get方法。前后端配合修改。

（2）CORS：Cross-origin resource sharing，跨域资源共享，在后端增加一些 HTTP 头，让服务器能声明允许的访问来源，就实现了跨域。

（3）接口代理：通过webpack设置一个本地服务器作为请求的代理对象，通过该服务器转发请求至目标服务器，得到结果再转发给前端。不过如果在最终发布上线时web应用和接口服务器不在一起仍会出现跨域问题。

在vue.config.js文件，新增以下代码：

module.exports = {
    devServer: {
        host: '127.0.0.1',
        port: 8084,
        open: true,// vue项目启动时自动打开浏览器
        proxy: {
            '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
                changeOrigin: true, //是否跨域
                pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                    '^/api': "" 
                }
            }
        }
    }
}