1.如何区分是同源还是跨域?

浏览器默认存在安全访问限制：如果从当前源向另外一个源发送数据请求，默认是不允许的
WEB页面：http://127.0.0.1:5500 默认端口号 80
数据接口：https://www.jianshu.com:443 https默认端口号443
两个地址对比，如果“协议、域名、端口号”三者有一个不一致，都是跨域请求
跨域错误：Access to XMLHttpRequest at ‘xxx’ from origin ‘xxx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2.跨域请求在项目中的场景和意义？

@1 开发时候是跨域的，但是项目部署上线后是同源的「现在很少了」

• 我们只需要解决开发时候的跨域问题即可

  解决办法：修改本地的hosts文件即可「原理：构建本地DNS解析缓存」
  @2 开发和部署的时候都是跨域的

• 为了实现服务器资源的合理利用，我们一个项目都是分服务器部署的「web服务器、数据服务器、图片服务器…」

• 需要请求第三方平台的数据 例如腾讯的各个产品 都有QQ登录

  • …
    开发的时候
    web地址：http://127.0.0.1:5500
    肖总提供的数据地址：http://www.xiaozong.com/api/…
    部署的时候
    web地址：http://www.xiaozong.com/index.html
    数据地址：http://www.xiaozong.com/api/…
    修改本地hosts文件
    www.xiaozong.com:80 127.0.0.1:5500
    后期在自己电脑的浏览器中访问 www.xiaozong.com ，其实最后访问的是 127.0.0.1，但是浏览器认为我们的web地址是 http://www.xiaozong.com，所以本质是“欺骗”浏览器…

3.跨域解决方案？

@1 JSONP跨域请求方案「局限性：只支持GET请求」
@2 CROS跨域资源共享
@3 PROXY跨域资源代理
@4 postMessage + iframe
…

方案：CROS跨域资源共享
原理：不允许跨域是因为，当前WEB页面的“源地址 origin”向服务器发送请求的时候不被允许，所以如果想解决这个问题，只需要“服务器端”设置为允许即可Access-Control-Allow-Origin…

fetch('http://127.0.0.1:1001/list', {
    // 前端设置跨域中：是否允许携带资源凭证「因为服务器设置是可以允许的，前端需要对应上」
    //   + same-origin:同源才允许
    //   + include:跨域也允许
    credentials: 'include'
}).then(response => {
    return response.json();
}).then(value => {
    console.log(value);
}); 
axios.get('http://127.0.0.1:1001/list', {
    withCredentials: true //axios
}).then(response => {
    console.log(response);
});