CORS 同源策略 IIS服务器设置

背景：

开发环境： webpack + vue ,

问题：

本地前端测试需要后台API支持，我的API放测试环境上。这样本地测试域名为 ‘http://localhost:8080’，但是测试API环境在我IIS服务器上。因此跨域是必然用到的。

IIS服务器代码为PHP，先是在代码里条件CORS access，但是发现在OPTION request虽然指向同样的API地址，其实或许的信息仅仅是服务器信息，并不真实的去调用程序而消耗服务器资源。所以，我们cors access仅需要设置在IIS服务器配置文件里。我这里仅修改web.config文件如下：

    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="http://localhost:8080"/>
                <add name="Access-Control-Allow-Headers" value="Content-Type"/>
                <add name="Access-Control-Allow-Methods" value="POST,GET,OPTIONS"/>
                <add name="Access-Control-Allow-Credentials" value="true"/>
            </customHeaders>
        </httpProtocol>
    </system.webServer>

其实需要提及的还有两点：

Access-Control-Allow-Origin 接允许跨域的域名。'*'意思为任何域名，但是在使用中，发现有的浏览器并不支持。所以建议填写域名。

Access-Control-Allow-Credentials 为允许提交cookie，但是有的浏览器貌似也不支持。我使用的是ES6的fetch，
                                 也有可能是ES6的强制检查，并不能确定是否就是我浏览器问题。

我的访问测试访问js如下：

        let requestConfig = {
//          credentials: 'include',  //带cookie，注释掉后就没问题了。
            method: type,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            mode: "cors", //是否同源检查。'no-cores'为不进行同源检查，但是使用后浏览器将不能读response，所以基本上必须用cors了 。
            cache: "force-cache"
        }

        if (type == 'POST') {
            Object.defineProperty(requestConfig, 'body', {
                value: JSON.stringify(data)
            })
        }
        
        try {
            const response = await fetch(url, requestConfig);
            console.log(response.status)
            var responseJson
            if(response.status == 200){
                responseJson = await response.json()
            }else{
                responseJson.return_code = 99999
                responseJson.return_message = 'HTTP交互失败'
            }
            console.log(responseJson)
            return responseJson
        } catch (error) {
            throw new Error(error)
        }

刚刚也在apache上试了下，如下操作后可以解决。

首先编辑httpd.conf

找到这行

#LoadModule headers_module modules/mod_headers.so

把#注释符去掉

LoadModule headers_module modules/mod_headers.so

目的是开启apache头信息自定义模块

然后在独立资源域名的虚拟主机添加一行

Header set Access-Control-Allow-Origin *   可以加在root 目录下的文件 .htaccess 中

意思是对这个域名的资源进行访问时，添加一个头信息

重启apache