Vue中的跨域，同源策略

一、跨域的原因：浏览器的同源策略

上述情况就是出现了跨域问题。

二、什么是同源策略呢？

        出于安全考虑，默认在网页中，使用JS发送请求，请求的服务器和当前所在网页的服务器必须一样，即两个请求地址的 协议、域名、端口必须一致。

三、为什么会跨域呢？

        目前，我们大量的前后端分离项目（后端有自己的服务器，前端有自己的服务器），各自有各自的服务器，互相交互时必出现跨域问题。

四、跨域的解决方案：（百度有9种，常用的有3种）

1、CORS：最推荐----只需要在服务器端添加白名单即可，允许其他来源的访问

这里由于我后端使用的node，所以下面代码是在node环境下使用CORS解决跨域的方案：

（1）下载第三方模块：npm install cors --save

（2）在你的app.js中加上下面代码（一定要放在接口的前面）

var cors = require('cors');
app.use(cors({
    origin:['http://localhost:8083'],  // 要设置白名单的 地址
    methods:['GET','POST'],  // 请求方式
    alloweHeaders:['Conten-Type', 'Authorization']
}));

2、proxy：代理方案----次推荐，这是在前端解决跨域的问题

        适合服务器代码不可修改的场景

        利用服务器之间的交互没有跨域限制的特征

Vue中解决跨域问题

        Vue脚手架生成的项目包，自带一个服务器，支持快速设置代理服务器，临时解决跨域问题，不适合上线。

（1）在项目的根目录下(和README.md同级)创建固定名称的配置文件：vue.config.js

（2）在vue.config.js写以下代码（注意修改 target的属性的值 ）

// 配置文件vue.config.js 是固定名
// 必须放在项目根目录下，与src同级别
module.exports = {
    //devServer:开发服务器配置项
    devServer: {
        // 小写的 procy
        proxy: {
            // 自定义代理名，请求时使用
            '/bili': {
                //target:代表要跨域到哪（dy 要映射到 trget 的域名）
                target: 'https://api.bilibili.com', //注意：结尾不要加 /
                changeOrigin: true, //关键点：代表需要跨域
                // 路径重写
                pathRewrite: {
                    // ^:正则的字符串开头
                    // 把开头的 /bili 替换成 '',即删除开头的 /bili
                    // 如果不把 /bili 替换掉，那么请求地址中就会多一个 "/bili" ,请求路径就错了
                    '^/bili': ''
                }
            }
            
        }
    }
}

（3）修改我们的请求地址，用 /bili 替换target后面的代码

        如：你要请求的地址是：‘https://api.bilibili.com/index.php’

                你要改成： ‘/bili/index.php’

（4）重启服务器（只要修改配置相关文件都需要重启服务器）

 3、jsonp：前后端一起使用，现在已经基本不用了，所以这里简单简单介绍一下

1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；

2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；

3、所以jsonp能解决跨域的原理就是：利用<script></script>的“src”属性发送请求，就不会受跨域问题的影响了。