前后端分离项目&＃xff0c;前后端请求访问通&＃xff0c;首先需要解决跨域问题

什么是跨域&＃xff0c;跨域的前提是什么&＃xff1f;

跨域的产生来源于现代浏览器所通用的同源策略(包括ajax/fetch请求&＃xff0c;dom渲染&＃xff1a;比如iframe等&＃xff0c;这样在一定程度上防止了 CSRF 攻击)

跨域主要是浏览器行为&＃xff0c;是客户端浏览器的行为&＃xff0c;浏览器根据同源策略&＃xff0c;判断是否是跨域。

服务器端和服务器互相请求&＃xff0c;是没有跨域这种说法的

浏览器出于安全原因&＃xff0c;浏览器限制从脚本内发起的跨源HTTP请求。 例如&＃xff0c;XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源&＃xff0c;除非响应报文包含了正确CORS响应头

所有请求都会产生跨域吗&＃xff1f;

简单请求不会产生跨域&＃xff0c;复杂请求才会产生跨域&＃xff0c;

跨域请求截断

跨域的情况下&＃xff0c;请求依然跨域到达服务器&＃xff0c;并且服务器可以正常响应&＃xff0c;并返回数据&＃xff0c;服务器不会报错&＃xff0c;但是由于浏览器的同源策略并没有把服务器的响应数据给到浏览器&＃xff0c;浏览器会报错(浏览器F12&＃xff0c;控制台跨域看到)&＃xff0c;因为违反了浏览器的同源策略。

预检请求是做什么的&＃xff1f;

浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request)&＃xff0c;从而获知服务端是否允许该跨域请求。服务器确认允许之后&＃xff0c;才发起实际的 HTTP 请求。在预检请求的返回中&＃xff0c;服务器端也可以通知客户端&＃xff0c;是否需要携带身份凭证(包括 COOKIEs 和 HTTP 认证相关数据)&＃xff0c;“预检请求” 的使用&＃xff0c;可以避免跨域请求对服务器的用户数据产生未预期的影响。但是“预检请求”会有安全问题&＃xff0c;泄漏服务器的允许方法类型等信息

OPTIONS&＃xff1a;response字段包含允许的方法&＃xff0c;表明服务器允许客户端使用 POST, GET 和 OPTIONS 方法发起请求。

Access-Control-Allow-Methods: POST, GET, OPTIONS

怎么解决跨域&＃xff1f;

跨域资源共享(CORS) 是一种机制&＃xff0c;它使用额外的 HTTP 头来告诉浏览器&＃xff0c;让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。

跨域资源共享标准新增了一组 HTTP 首部字段&＃xff0c;允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

· Access-Control-Allow-Origin&＃xff1a;接受的域名请求&＃xff0c;*表示任意域名· Access-Control-Allow-Methods&＃xff1a;允许的方法类型&＃xff1a;get&＃xff0c;put· Access-Control-Allow-Headers&＃xff1a;· Access-Control-Allow-Credentials&＃xff1a;true&＃xff0c;允许携带凭证· Access-Control-Max-Age

Access-Control-Allow-Origin&＃xff1a;浏览器根据接受到的响应头里的 Access-Control-Allow-origin 字段做匹配&＃xff0c;若无该字段&＃xff0c;说明不允许跨域&＃xff0c;从而抛出一个错误&＃xff0c;若有该字段&＃xff0c;则对字段内容和当前域名做匹配&＃xff0c;如果同源&＃xff0c;则说明可以跨域&＃xff0c;浏览器接受该响应&＃xff0c;若不同源&＃xff0c;则说明该域名不可跨域&＃xff0c;浏览器不接受该响应&＃xff0c;并抛出一个错误。通配符*&＃xff0c;表示允许来自所有域的请求。

Access-Control-Allow-Credentials&＃xff1a;一般而言&＃xff0c;对于跨域 XMLHttpRequest 或 Fetch 请求&＃xff0c;浏览器不会发送身份凭证信息。如果要发送凭证信息&＃xff0c;需要设置 XMLHttpRequest 的某个特殊标志位。

对于附带身份凭证的请求&＃xff0c;服务器不得设置 Access-Control-Allow-Origin 的值为“*”。

这是因为请求的首部中携带了 COOKIE 信息&＃xff0c;如果 Access-Control-Allow-Origin 的值为“*”&＃xff0c;请求将会失败。

Access-Control-Allow-Headers&＃xff1a;在跨域访问时&＃xff0c;XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头&＃xff0c;Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma&＃xff0c;如果要访问其他头&＃xff0c;则需要服务器设置本响应头。

Access-Control-Expose-Headers 头让服务器把允许浏览器访问的头放入白名单&＃xff0c;这样浏览器就能够通过getResponseHeader访问白名单内的响应头了。