同源策略和解决跨域问题（服务端设置，三步骤）

同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

同源是指相同的协议、域名、端口，三者都相同才属于同域。不符合上述定义的请求，则称为跨域。
（URL由协议、域名、端口和路径组成）

为什么要有跨域限制?

因为存在浏览器同源策略，所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到，跨域限制主要的目的就是为了用户的上网安全。

CORS（跨域资源共享）

CORS（Cross-origin resource sharing，跨域资源共享）是一个 W3C 标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器不能低于 IE10。

整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

报错信息：

解决方法：

1)在服务端安装如下命令行

npm install  egg-cors --save

2)之后在config/plugin.js配置文件设置

代码如下：

 cors: {
    enable: true,
    package: 'egg-cors',
  },

3)在config.default.js配置文件设置

代码如下：

/** ****** 允许跨域访问,关闭csrf认证 /config.default.js ********/
  exports.security = {
    csrf: {
      enable: false,
      ignoreJSON: true,
    },
    domainWhiteList: [ 'http://localhost:7001' ],
  };

  config.cors = {
    origin: '*',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
  };

参考链接

https://blog.csdn.net/qq_41846861/article/details/86681378
https://blog.csdn.net/animatecat/article/details/82744098