javascript - fetch设置了Access-Control-Allow-Origin为我的ip依然无法发post跨域请求

问题描述

问 题

1.用了fetch api，因为要做session验证，所以tomcat的Access-Control-Allow-Origin设置为了我的ip
2.登录是post请求，下单也是post请求，但是登录正常，下单却提示跨域
3.提示如下，这个提示大家应该都见过很多遍了

Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

4.两个post请求都是如下代码

const postWithCookie=({url,body})=>{
    const fetchUrl=HOME_URL+url;
    let headers =new Headers({
        'Accept': 'application/json',
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Credentials':'true',
    })
    return fetch(fetchUrl,{
        credentials: "include",
        method: "POST",
        headers:headers,
        body:body
    }).then(response=>{
        if(window.DEBUG){console.info('url',response)}
        return response.json();
    })
}

5.后台两个接口也是一模一样的设置，但请求的结果完全不同

6.下面是tomcat过滤器的一些设置

    <!-- 跨域设置 -->
    <filter>
        <filter-name>CrossOrigin</filter-name>
        <filter-class>com.util.CrossOriginFilter</filter-class>
        <init-param>
            <param-name>AccessControlAllowOrigin</param-name>
            <param-value>http://192.168.0.165</param-value>
        </init-param>
        <init-param>
            <param-name>AccessControlAllowMethods</param-name>
            <param-value>POST, GET, DELETE, PUT</param-value>
        </init-param>
        <init-param>
            <param-name>AccessControlMaxAge</param-name>
            <param-value>3628800</param-value>
        </init-param>
        <init-param>
            <param-name>AccessControlAllowHeaders</param-name>
            <param-value>x-requested-with,Content-Type,Access-Control-Allow-Credentials,Access-Control-Allow-Origin</param-value>
        </init-param>
        <init-param>
            <param-name>AccessControlAllowCredentials</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CrossOrigin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

请教一下大大们，谢谢了。
真的搞不懂这个fetch，实在不行只能用ajax了。

解决方案

        <init-param>
            <param-name>AccessControlAllowMethods</param-name>
            <param-value>POST, GET, DELETE, PUT, OPTIONS</param-value>
        </init-param>

这篇关于javascript - fetch设置了Access-Control-Allow-Origin为我的ip依然无法发post跨域请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！