跨域-原因及解决方案

跨域

如何判断跨域请求

在A地址(发起请求的页面地址)向B地址(要请求的目标页面地址)发起请求时,
如果A地址和B地址在:协议 域名 端口 不全相同,则说明请求时跨域的.

跨域请求报错的原因

请求是跨域的,并不一定会报错.普通的图片请求,css文件请求时不会报错的
跨域请求出现错误的条件:浏览器同源策略 && 请求时ajax类型
同源策略(Same origin policy):是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略上的，浏览器只是针对同源策略的一种实现。

同源是指：协议(http、https、rtmp…)、域名(jd、taobao、baidu)、端口(80、8080、443)都相同，其中有一个不同都会产生跨域。

解决方案

1. 前端用JSONP(JSON with padding)方式去发送请求(jsonp不是ajax请求)
JSONP是通过script标签加载数据的方式去获取当作JS代码来执行提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上包裹这个函数名，发送给前端。
换句话说:JSONP需要对应接口的后端的配合才能实现
JSONP和AJAX对比
JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略（跨域请求）
JSONP优缺点
JSONP优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击
实现方式

<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

2. 后端写代码(CORS)在响应中添加必要的响应头,让响应回来之后浏览器不报错.

** vue代理转发**
在vue.config.js中设置

devServer:{
 // 代理配置
    proxy: {
      // 如果请求地址以/api打头,就触发代理机制
      // http://localhost:9588/api/login -> http://localhost:3000/api/login
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }
 }

3.降域
4.postMessage
有9种方式，剩下的有时间接着整理，脑容量。。。。。。
参考链接：https://www.jianshu.com/p/a0b066c0c976 （这个作者写的特别详细）