我和跨域的狗皮膏药故事

跨域

谈谈跨域之前, 我们先谈谈这几个响应头.

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响应报头指示的请求的响应是否可以暴露于该页面。当true值返回时它可以被暴露。

凭证是 Cookie ,授权标头或 TLS 客户端证书。

当作为对预检请求的响应的一部分使用时,它指示是否可以使用凭证进行实际请求。请注意,简单的GET请求不是预检的,所以如果请求使用凭证的资源,如果此资源不与资源一起返回,浏览器将忽略该响应,并且不会返回到 Web 内容。

Access-Control-Allow-Credentials的 header 文件与该XMLHttpRequest.withCredentials属性或者在提取 API credentialsRequest()构造函数中的选项一起工作。必须在双方(Access-Control-Allow-Credentials的 header 和 XHR 或 Fetch 请求中)设置证书,以使 CORS 请求凭证成功。

Headers

Access-Control-Allow-Headers响应报头在响应用于一个预检请求指示哪个HTTP标头将通过提供Access-Control-Expose-Headers使实际的请求时。

[纠错](javascript:;)

简单标头AcceptAccept-LanguageContent-LanguageContent-Type(任一,但仅与一个MIME类型其解析值的(忽略参数)application/x-www-form-urlencodedmultipart/form-datatext/plain),总是可用的,并且不需要由该头中列出。

如果请求具有标头,则此标头是必需的Access-Control-Request-Headers

Methods

Access-Control-Allow-Methods响应标头指定响应访问所述资源到时允许的一种或多种方法预检请求

POST,GET,OPTIONS...

Origin

Access-Control-Allow-Origin响应 header 指示是否该响应可以与具有给定资源共享原点

重点 Access-Control-Expose-Headers

Access-Control-Expose-Headers响应报头指示哪些报头可以公开为通过列出他们的名字的响应的一部分。

默认情况下,只显示6个简单的响应标头

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

如果您希望客户端能够访问其他标题,则必须使用Access-Control-Expose-Headers标题列出它们。

首先为什么会出现 Options 请求 因为浏览器认为你是跨域了,所以发起了一次请求.

首先理解一下Simple Request https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

简单请求,简单请求受限,不会触发Cors检查,

允许的方法 必须在以内 不能超出,

Methods: GET POST HEAD

Headers:

  1. Accept
  2. Accept-Language
  3. Content-Language
  4. Content-Type
  5. DRP
  6. Downlink
  7. Save-Data
  8. Viewport-Width
  9. With

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

Content-Type 只允许以下内容

  1. application/x-www-form-urlencoded
  2. multipart/form-data
  3. text/plain

可能我们最常见的 是 OAuth2 时候会有一个 Authorizationheader

这就违反了Simple Request

于是 他就开始了他的预请求之路 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 只会看见一次 后面的因为 Access-Control-Max-Age: 3600 或者更大
在1小时内只会检查一次 换个浏览器又会出现哦!

我的博客: https://runjava.cn

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容