跨域
談?wù)効缬蛑? 我們先談?wù)勥@幾個(gè)響應(yīng)頭.
Access-Control-Allow-Credentials : true
Access-Control-Allow-Headers : *
Access-Control-Allow-Methods: *
Access-Control-Allow-Origin: http://baidu.com
redentials
access-Control-Allow-Credentials響應(yīng)報(bào)頭指示的請(qǐng)求的響應(yīng)是否可以暴露于該頁(yè)面鳞滨。當(dāng)true值返回時(shí)它可以被暴露际乘。憑證是 Cookie 英支，授權(quán)標(biāo)頭或 TLS 客戶端證書溢陪。
當(dāng)作為對(duì)預(yù)檢請(qǐng)求的響應(yīng)的一部分使用時(shí)熬苍，它指示是否可以使用憑證進(jìn)行實(shí)際請(qǐng)求。請(qǐng)注意怒坯，簡(jiǎn)單的
GET請(qǐng)求不是預(yù)檢的揩抡，所以如果請(qǐng)求使用憑證的資源，如果此資源不與資源一起返回扣猫，瀏覽器將忽略該響應(yīng)菜循，并且不會(huì)返回到 Web 內(nèi)容翘地。
Access-Control-Allow-Credentials的 header 文件與該XMLHttpRequest.withCredentials屬性或者在提取 APIcredentials的Request()構(gòu)造函數(shù)中的選項(xiàng)一起工作申尤。必須在雙方（Access-Control-Allow-Credentials的 header 和 XHR 或 Fetch 請(qǐng)求中）設(shè)置證書，以使 CORS 請(qǐng)求憑證成功衙耕。
Headers
Access-Control-Allow-Headers響應(yīng)報(bào)頭在響應(yīng)用于一個(gè)預(yù)檢請(qǐng)求指示哪個(gè)HTTP標(biāo)頭將通過提供Access-Control-Expose-Headers使實(shí)際的請(qǐng)求時(shí)昧穿。[糾錯(cuò)](javascript:;)
的簡(jiǎn)單標(biāo)頭，
Accept橙喘，Accept-Language时鸵，Content-Language，Content-Type（任一厅瞎，但僅與一個(gè)MIME類型其解析值的（忽略參數(shù)）application/x-www-form-urlencoded饰潜，multipart/form-data或text/plain），總是可用的和簸，并且不需要由該頭中列出彭雾。如果請(qǐng)求具有標(biāo)頭，則此標(biāo)頭是必需的
Access-Control-Request-Headers锁保。
Methods
Access-Control-Allow-Methods響應(yīng)標(biāo)頭指定響應(yīng)訪問所述資源到時(shí)允許的一種或多種方法預(yù)檢請(qǐng)求薯酝。POST,GET,OPTIONS...
Origin
Access-Control-Allow-Origin響應(yīng) header 指示是否該響應(yīng)可以與具有給定資源共享原點(diǎn)。
重點(diǎn) Access-Control-Expose-Headers
Access-Control-Expose-Headers響應(yīng)報(bào)頭指示哪些報(bào)頭可以公開為通過列出他們的名字的響應(yīng)的一部分爽柒。默認(rèn)情況下吴菠，只顯示6個(gè)簡(jiǎn)單的響應(yīng)標(biāo)頭：
Cache-ControlContent-LanguageContent-TypeExpiresLast-ModifiedPragma如果您希望客戶端能夠訪問其他標(biāo)題，則必須使用
Access-Control-Expose-Headers標(biāo)題列出它們浩村。
首先為什么會(huì)出現(xiàn) Options 請(qǐng)求 因?yàn)闉g覽器認(rèn)為你是跨域了,所以發(fā)起了一次請(qǐng)求.
首先理解一下Simple Request https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests
簡(jiǎn)單請(qǐng)求,簡(jiǎn)單請(qǐng)求受限,不會(huì)觸發(fā)Cors檢查,
允許的方法 必須在以內(nèi) 不能超出,
Methods:
GETPOSTHEAD
Headers:
- Accept
- Accept-Language
- Content-Language
- Content-Type
- DRP
- Downlink
- Save-Data
- Viewport-Width
- With
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests
Content-Type 只允許以下內(nèi)容
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
可能我們最常見的 是 OAuth2 時(shí)候會(huì)有一個(gè) Authorization 在header中
這就違反了Simple Request
于是 他就開始了他的預(yù)請(qǐng)求之路 Options
解決:
https://enable-cors.org/server.html
舉例 Tomcat
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
什么? 你的是Springboot
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* @author 鄭查磊
* @date 2019-07-12 10:50
* @email <a href="mailto:stone981023@gmail.com">SmallStone</a>
*/
@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8000")
.allowedMethods("*")
.allowedHeaders("*")
.allowCredentials(true)
.exposedHeaders("Authorization")
.maxAge(1800 * 2 * 24 * 30 * 12);
}
}
還有其他的辦法, 你也可以通過加攔截器
或者 @CrossOrigin
注意了 如果你是 Spring Security Oauth2
/**
* @author 鄭查磊
* @date 2019年7月18日17:43:32
* https://stackoverflow.com/questions/37516755/spring-boot-rest-service-options-401-on-oauth-token
*/
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class SimpleCORSFilter implements Filter {
private FilterConfig config;
@Override
public void destroy() {
}
@Override
public void doFilter(ServletRequest req, ServletResponse resp,
FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) resp;
HttpServletRequest request = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN");
if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
response.setStatus(HttpServletResponse.SC_OK);
} else {
chain.doFilter(req, resp);
}
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
config = filterConfig;
}
}
Options 只會(huì)看見一次 后面的因?yàn)?Access-Control-Max-Age: 3600 或者更大
在1小時(shí)內(nèi)只會(huì)檢查一次 換個(gè)瀏覽器又會(huì)出現(xiàn)哦!
我的博客: https://runjava.cn
