跨域，及解决跨域的几种方法

什么是跨域？

首先要了解什么叫做“同源策略”。

同源策略：是指同协议，同域名，同端口号，只要有一个不同，就会产生跨域问题，是浏览器为了安全起见进行的一个拦截限制。

跨域用一个简单的例子来说，就是假如有一个A公司，想要去访问B公司的信息数据，而他们的ip都是自己本地ip，不同源，这时浏览器就会为了安全起见，产生跨域来限制你的请求。

解决跨域的几种方法：

1.jsonp

原理：动态生成script标签，通过src属性加载

 src属性是不受同源策略的影响的，可以把我们需要跨域的资源放在src上面，就可以解决跨域的问题了。

缺点：不支持post请求，应用场景及其有限。

应用场景：有些第三方数据接口可能会使用jsonp解决跨域问题，用来请求一些公共信息。

如：全球有多少城市，请求中国天气网的天气信息等等

2.中间代理服务器

原理：我们上面说到跨域的产生是因为不满足同源策略，浏览器进行的一个拦截限制，而服务器之间是不会产生跨域的，所以就用到了中间代理服务器的技术，来解决跨域请求的问题。

中间代理服务器又被称为转发代理服务器，顾名思义就是在A与B之间，添加一个中间代理服务器，起到一个中介的作用，来进行数据的请求和访问。

搭建一个与前端同源的代理服务器，前端将请求传递给代理服务器，代理服务器再把请求发送给目标服务器，目标服务器把响应的数据传递给代理服务器，代理服务器再发送给前端，就是这样的一个过程，灵魂画手已上线，请看下图。

 3.CORS跨域资源共享

后台来进行操作，服务器端进行配置,加一个响应头

res.header('Access-Control-Allow-Origin", "*")

 4.反向代理

基于Vue，原理跟中间代理服务器是一样的。

在根目录下创建一个vue.config.js，内容如下，Vue会自动的帮你生成一个代理服务器

module.exports = {
    devServer:{
    	//设置代理
        proxy:{
            '/api':{
                // 目标对象
                target:'http://localhost:3000',//要跳转的位置
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
}

原理：

让proxy通过vue帮你产生一个代理服务器，

然后通过这个代理服务器去请求数据，最后把请求的数据返回给你

/api，表示，哪一种接口需要使用跨域？

如果我请求的路径是以/api开头，则使用代理服务器

毕竟不是所有的接口都需要使用跨域

target：要跨域跳转到的位置

 pathRewrite:{
                    '^/api':''
                }

根据你访问的路径判断是否要使用跨域，如果是以/api开头的，

则接下来拼接的时候，会把/api给省略掉

我们baseurl配置：

baseURL: '/api',

然后请求登陆 /login,相当于路径是/api/login,

通过pathRewrite拼接重新后：

从：

http://localhost:3000/api/login

把/api重写为空，即为：

http://localhost:3000/login

感谢老陈的悉心教导！