前端跨域和常见解决方案

一、什么是跨域

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的 资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

有一点必须要注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只 是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常 进行通信，即协议、域名、端口号都完全一致。

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就 算作“跨域

二、同源策略会造成以下的影响

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 JS 对象无法获取

Ajax请求发送不出去

三、跨域解决方案

对最主要的AJAX跨域来说（也就是平常调接口时）：

1）（后端）服务器配置CORS(跨域资源共享)

2）（后端）node.js或nginx,反向代理，把跨域改造成同域

3）（前端）将JSON升级成JSONP,在JSON的基础上，利用标签可以跨域的特性，加上头设置

4）对iframe跨域来说：H5提供了postMessage()的方法，可以在父子页面进行通信（加分项）

在日常工作中，原生js我们使用最多的还是jsonp和CORS两种

5、处理跨域方法五vue-cli代理转发

浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run dev等命令时实际上是用node运行了一 个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了亦 曾代理，因为不会出现跨域问题。（反向代理用一个代理服务器 进行接口通信）

如果后端jsonp也不弄, cors也不弄, 就给你个接口地址

我们可以在本地弄个服务器, 然后用服务器请求后台服务器接口地址

但是vuecli脚手架, 启动了一个webpack开发服务器, 它就能做代理转发

而且前端和这个服务器是同源的都是8080端口

需要修改webpack开发服务器的配置即可

在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么： 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，

其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

devServer: {
  proxy: {
    // http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
    '/api': { // 请求相对路径以/api开头的, 才会走这里的配置
      target: 'http://c.m.163.com', // 后台接口域名 我们要代理的真实的接口地址
        changeOrigin: true, // 改变请求来源(欺骗后台你的请求是从http://c.m.163.com)
        pathRewrite: {
        '^/api': '' // 因为真实路径中并没有/api这段, 所以要去掉这段才能拼接正确地址转发请
        求
      }
    }
  }
}

axios请求的代码

axios({
url: '/api/nc/article/headline/T1348647853363/0-40.html'
})

实现原理

在script标签中 用 src属性访问跨域地址是被允许的而且不会报错市面上有插件帮助实现