猿问

CROS OPTIONS跨域如何实现?

看了看网上关于CROS的,大概明白非简单请求的流程。
先Options请求,然后协商成功后,在正式请求。

怎么搞都搞不定。。。做一次伸手党了
我是在header里自定义了两个值做校验。

浏览器就报下面的跨域问题。。。

已拦截跨源请求:同源策略禁止读取位于 http://111.231.56.227:12084/monitor/detailMission 的远程资源。(原因:来自 CORS 预检通道的 CORS 头 'Access-Control-Allow-Headers' 的令牌 'appid' 无效)。 

JS代码

    var form = new FormData();
    form.append("mission_id", "245d14793c0e4f4fa936755cd558841a");

    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "http://111.231.56.227:12084/monitor/detailMission",
        "method": "POST",
        "headers": {
            "appId": "0000815",
            "appSecret": "cbd88ab8822fa",
        },
        "processData": false,
        "contentType": false,
        "mimeType": "multipart/form-data",
        "data": form
    };

    $.ajax(settings).done(function (response) {
        console.log(response);
    });

PHP Action

        header('Content-type: application/json');
        header('Access-Control-Allow-Origin:*');

        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
            header('Access-Control-Allow-Methods:POST');
            header('Access-Control-Allow-Headers:*');
            header('Access-Control-Mas-Age:3600');
            $this->returnSuccess();
        }
        $this->checkAppIdAndSecret();
        $id = $this->getPost('mission_id');

大家说headers不能用*,因此改了一下

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, appid, appSecret");

Methods也加上OPTIOHS,GET,PUT啥的了
换了个报错
https://img3.mukewang.com/5c8f3d910001a0d108000326.jpg

www说
浏览 1002回答 4
4回答

慕勒3428872

Support for wildcards in the Access-Control-Allow-Headers header was added to the living standard only in May 2016, so it may not be supported by all browsers. Access-Control-Allow-Headers不接受通配符。 cors-access-control-allow-headers-wildcard-being-ignored 补充 注意拼写错误,响应允许的是appSecert,请求发送的是appSecret。

天涯尽头无女友

你后端header 没有允许 appid, appSecret。PHP 添加 header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, appid, appSecret");

汪汪一只猫

看了下MDN ,上面没有说Access-Control-Allow-Headers 可以用 *

HUWWW

Access-Control-Allow-Methods得把options加上噻
随时随地看视频慕课网APP
我要回答