Iクロスドメイン絆創膏の物語

クロスドメイン

クロスドメインの話の前に、のは、これらのレスポンスヘッダについて話しましょう。

Access-Control-Allow-Credentials:真

アクセス制御-許可-ヘッダ:*

アクセス制御-許可-方法:*

アクセス制御-許可-原産地:http://baidu.com

redentials

ccess-Control-Allow-Credentials要求ヘッダーに対する応答が示している場合、ページへの応答は露出していてもよいです。ときtrue、それは戻り値が露出していてもよいです。

証明書には、クッキー、認証ヘッダーまたはTLSクライアント証明書です。

実際の信用証明書要求を使用するかどうかを示す事前スクリーニングのための要求への応答の一部として使用される場合。シンプル、注意してくださいGETリソースはリソースで返されていない場合、リソースの資格情報を使用して要求は、ブラウザが応答を無視して、Webコンテンツに戻りませんので、もし要求が、事前スクリーニングではありません。

Access-Control-Allow-CredentialsヘッダーとファイルXMLHttpRequest.withCredentialsプロパティ、または抽出APIでcredentialsRequest()コンストラクタでオプションを操作します。(両方でなければならないAccess-Control-Allow-CredentialsCORSクレデンシャルの成功を要求するように、セットおよび証明書要求ヘッダーXHRまたはフェッチ)。

ヘッダ

Access-Control-Allow-Headers応答で応答ヘッダプリフライト要求により提供されるHTTPヘッダーを示すためにAccess-Control-Expose-Headers時間実際の要求。

補正

シンプルヘッダ、、 、AcceptAccept-LanguageContent-LanguageいずれかContent-Type一つのみMIME解析値の種類(パラメータは無視される)application/x-www-form-urlencodedmultipart/form-dataまたはA text/plain)、常に利用可能であり、このヘッドでリストアップされる必要はありません。

要求ヘッダーを持っている場合、このヘッダが必要ですAccess-Control-Request-Headers

メソッド

Access-Control-Allow-Methodsレスポンスヘッダは、1つまたは複数の方法に応じて、リソースにアクセスする指定可能プリフライト要求を

POST、OPTIONSをGET ...

原点

アクセス制御-許可由来のレスポンスヘッダは、応答が有する特定のリソースを共有することができるかどうかを示す原点

重点アクセス制御 - 露光 - ヘッダ

Access-Control-Expose-Headersレスポンスヘッダヘッダは、自分の名前をリストすることにより、応答の一部として公表されることができるかを示しています。

デフォルトでは、唯一の6は示して簡単なレスポンスヘッダを

- Cache-Control

- Content-Language

- Content-Type

- Expires

- Last-Modified

- Pragma

あなたは、クライアントが他のタイトルにアクセスできるようにしたい場合は、使用しなければならないAccess-Control-Expose-Headersタイトルリストにそれらを。

まず、なぜそこにいるOptionsブラウザは、あなたがそう要求を開始し、クロスドメインいると考えているため、要求が。

まず、どのように単純な要求を理解します https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

単純な要求は、単純な要求は、CORS検査をトリガしない、制限されています、

この方法は、内の許容超えてはなりません

方法: GET POST HEAD

ヘッダ:

1.受け入れ

2.受け入れ言語

3.コンテンツの言語

4.コンテンツタイプ

5. DRP

6.ダウンリンク

7.セーブデータ

8.ビューポート幅

9.付き

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

コンテンツタイプは、次のことができます

1.アプリケーション/ x-www-form-urlencodedで

2.マルチパート/フォームデータ

3.テキスト/平野

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:[email protected]">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

あなたは春のセキュリティの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;
    }
}
复制代码

スクリーンショットマイクロチャネル_20190718180021.png

一時間にだけ確認し、一度別のブラウザがああ表示されます3600以上:バックアクセス制御マックスエイジためのオプションは、一度だけ表示されます!

おすすめ

転載: juejin.im/post/5d3545536fb9a07ed524dced