我曾多次遇到CORS问题，通常可以解决它，但我想通过从MEAN堆栈范式中看到这一点来真正理解。
之前我只是在我的快速服务器中添加了中间件来捕获这些东西，但它看起来像有某种预挂钩，使我的请求出错。
在preflight响应中，Access-Control-Allow-Headers不允许请求报头字段Access-Control-Allow-Headers
我假设我可以这样做:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","*")
})
或者等价的，但这似乎不能解决问题。我当然也试过
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Headers","Access-Control-Allow-Headers")
})
还是不走运。
当前回答
在花了差不多一天的时间后，我才发现添加下面两个代码解决了我的问题。
将此添加到Global.asax中
protected void Application_BeginRequest()
{
if (Request.HttpMethod == "OPTIONS")
{
Response.StatusCode = (int)System.Net.HttpStatusCode.OK;
Response.End();
}
}
并在web配置中添加以下内容
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
</customHeaders>
</httpProtocol>
其他回答
我收到了错误的OP声明使用Django, React和Django -cor -headers库。要用这个堆栈修复它，请执行以下操作:
在settings.py中根据官方文档添加以下内容。
from corsheaders.defaults import default_headers
CORS_ALLOW_HEADERS = default_headers + (
'YOUR_HEADER_NAME',
)
再补充一点，你也可以把这些头文件放到Webpack配置文件中。我需要他们在我的情况下，因为我正在运行webpack开发服务器。
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Authorization"
}
},
我自己刚刚在ASP上下文中遇到了这个问题。NET确保您的Web。配置如下所示:
<system.webServer>
<modules>
<remove name="FormsAuthentication" />
</modules>
<handlers>
<remove name="ExtensionlessUrlHandler-Integrated-4.0" />
<!--<remove name="OPTIONSVerbHandler"/>-->
<remove name="TRACEVerbHandler" />
<!--
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
-->
</handlers>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
</customHeaders>
</httpProtocol>
注意Access-Control-Allow-Headers键的Authorization值。我错过了授权值，这个配置解决了我的问题。
在接下来的js我的问题得到解决使用
const cors=micro_cors({
origin:"https://studio.apollographql.com",
allowMethods:['POST','GET','PUT','PATCH','DELETE','OPTIONS'],
allowCredentials:true,
allowHeaders:['X-Requested-With','X-HTTP-Method-Override','Content-Type','Authorization','Accept','Access-Control-Allow-Credentials','Access-Control-Allow-Origin' ]
})
然后把它吸进去
export default cors(async function handler(req, res) {
await serverStart
if(req.method==="OPTIONS"){
res.end()
return false
}
apolloserver.createHandler({path:"/api/graphql"})(req,res)
})
当我们为请求定制报头时，会出现这个问题。此请求使用HTTP OPTIONS并包含几个头。
此请求所需的头是Access-Control-Request-Headers，它应该是响应头的一部分，并且应该允许来自所有源的请求。有时在响应头中也需要Content-Type。所以你的响应头应该是这样的
response.header("Access-Control-Allow-Origin", "*"); // allow request from all origin
response.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization");
