我曾多次遇到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")
})

还是不走运。


当前回答

这是你需要添加的使它工作。

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

The browser sends a preflight request (with method type OPTIONS) to check if the service hosted on the server is allowed to be accessed from the browser on a different domain. In response to the preflight request if you inject above headers the browser understands that it is ok to make further calls and i will get a valid response to my actual GET/POST call. you can constraint the domain to which access is granted by using Access-Control-Allow-Origin", "localhost, xvz.com" instead of * . ( * will grant access to all domains)

其他回答

在接下来的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)

 })

当你开始玩自定义请求头,你会得到一个CORS预飞行。这是一个使用HTTP OPTIONS谓词并包含几个头的请求,其中一个是Access-Control-Request-Headers,列出了客户端想要包含在请求中的头。

您需要用适当的CORS报头回复CORS预飞行,以使此工作正常进行。其中之一就是Access-Control-Allow-Headers。该头需要包含与Access-Control-Request-Headers头包含的值相同(或更多)的值。

https://fetch.spec.whatwg.org/#http-cors-protocol将更详细地解释这个设置。

这是你需要添加的使它工作。

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

The browser sends a preflight request (with method type OPTIONS) to check if the service hosted on the server is allowed to be accessed from the browser on a different domain. In response to the preflight request if you inject above headers the browser understands that it is ok to make further calls and i will get a valid response to my actual GET/POST call. you can constraint the domain to which access is granted by using Access-Control-Allow-Origin", "localhost, xvz.com" instead of * . ( * will grant access to all domains)

确保你从客户端需要的所有头信息都传递给Access-Control-Allow-Headers,否则你会一直遇到CORS问题。在这种情况下,这将是'x-api-key',否则你会一直遇到cors问题

const options = {
  method: "GET",
  headers: new Headers({
    "X-API-Key": "ds67GHjkshjh00ZZhhsskhjgasHJHJHJ&87",
  }),
};

response.setHeader(
    "Access-Control-Allow-Headers", 
    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, x-api-key");

在Post API调用中,我们在请求体中发送数据。因此,如果我们将通过向API调用添加任何额外的头来发送数据。然后第一个OPTIONS API调用会发生,然后post调用会发生。因此,您必须首先处理OPTION API调用。

你可以通过编写一个过滤器来处理这个问题,在里面你必须检查选项调用API调用并返回一个200 OK状态。下面是示例代码:

package com.web.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.catalina.connector.Response;

public class CustomFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest httpRequest = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");
        if (httpRequest.getMethod().equalsIgnoreCase("OPTIONS")) {
            response.setStatus(Response.SC_OK);
        }
        chain.doFilter(req, res);
    }

    public void init(FilterConfig filterConfig) {
        // TODO
    }

    public void destroy() {
        // Todo
    }

}