同源策略？跨域？

同源策略？跨域？

同源、不同源

协议、域名、端口号都一样则同源，如果三者有一个不一样则属于不同源。

什么是浏览器的同源策略？

同源策略是Browser层面的一个保护措施，限制对不同源数据的使用，避免产生安全问题。

• 这里Browser对于不同源的Server发出了请求，但是拒绝了Server响应的数据。

什么是跨域？

浏览器每次请求前必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证 相关数据）。跨域就是无视Browser的这个限制，Browser可以使用不同源的数据。

举个例子：

你去肯德基店让店员帮你买碗兰州拉面，店员打电话给拉面馆点了一份兰州拉面，面送到以后，店员给拦住了拒绝让你使用。

这个场景下：

店员：浏览器

拉面馆：服务器

兰州拉面：请求的数据

这里浏览器请求了服务器，但是对于请求的数据，浏览器拒绝使用用。

跨域问题产生的流程：

Browser回检测哪些请求需要被预检，会发送一个使用OPTIONS方法的遇见请求，OPTIONS 是 HTTP/1.1 协议中定义的方法，用于从Server获取更多的信息，该方法不会对Server的资源产生影响。预检请求中同时携带了下面两个首部字段：

• Access-Control-Request-Method: POST
• Access-Control-Request-Headers: X-PINGOTHER, Content-Type

第一个字段告诉Server，实际请求的是POST方法，第二个字段告诉浏览器实际请求将携带两个请求首部字段。Server据此决定，该请求是否被允许。

解决方法：

在响应头中添加字段Access-Control-Allow-Origin，告知Browser该资源可以被哪些域访问。

Access-Control-Allow-Origin: https://foo.example

Access-Control-Allow-Origin: *