部署 Mean-Stack 项目时出现问题。遇到 CORS 阻塞每个请求的问题

Posted 2023-03-03

【中文标题】部署 Mean-Stack 项目时出现问题。遇到 CORS 阻塞每个请求的问题

【英文标题】：Problem while deploying Mean-Stack project. Having problem that CORS is blocking every request

【发布时间】：2019-12-02 04:47:44

【问题描述】：

我正在部署 Mean-Stack 项目，并在部署时收到 CORS 策略错误提示...

访问 XMLHttpRequest 在 'http://XXX.XXX.X.XX:4000/user/postUserAuth' 来自原点 “http://localhost:4200”已被 CORS 策略阻止：响应 预检请求未通过访问控制检查： 响应中的 Access-Control-Allow-Origin' 标头不能是 当请求的凭据模式为“包含”时，通配符“*”。这 XMLHttpRequest 发起的请求的凭证模式是 由 withCredentials 属性控制

我们怎样才能允许所有请求到 Express Server 并解决这个问题？

我们用于 Angular 的服务器是 lite-server。

// Used this in Express 
    app.use(cors((
    
    'origin':'*',
    'credentials':true,
    'preflightContinue':true,
    'optionSuccessStatus':204
    
    )));

    //Server is logging this 
     "OPTIONS /user/postUserAuth HTTP/1.1" 200 4 "http://localhost:4200/login


    //Angular service class
    export class LogincontrollerService 
      private address = APIEndpoint;
      _LoginURL=this.address+"/user/postUserAuth";
      constructor(private _http: HttpClient)  

      // function to for sending request to server with data. 
      getLogin(data)
      return this._http.post<any>(this._LoginURL,data,
        withCredentials:true
      );
    

    

【问题讨论】：

Post Resolving cors from server side, setting "'Access-Control-Allow-Credentials','false'"，你需要使用 Angular(frontend) 端的proxy，我回答在之前的链接中

我尝试了 proxy.conf.json 之后，我得到了这样的错误 - Access to XMLHttpRequest at 'http://XXX.XXX.X.XX:XXXX/user/postUserAuth' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

【参考方案1】：

方法一：在cors选项中指定url而不是*：

const corsOptions = 
    origin: 'http://localhost:4200',
    credentials: true,
    preflightContinue:true,
    optionSuccessStatus:204


app.use(cors(corsOptions));

注意：这是安全的一部分。如果您想允许凭据，那么您的 Access-Control-Allow-Origin 不得使用*。您必须指定确切的协议 + 域 + 端口*

方法 2：使用以下中间件解决 CORS（如果您不想允许凭据）：

app.use(function (req, res, next) 

    // website you wish to  allow to connet    
    res.setHeader('Access-Control-Allow-Origin','http://localhost:4200/');

    // request method you wish to allow
    res.setHeader('Access-Control-Allow-Methods','GET, POST, OPTION, PUT, PATCH, DELETE');

    // request headers you wish to allow 
    res.setHeader('Access-Control-Allow-Headers','X-Requested-With,content-type,Authorization');   

    // set to true if you need the website to include  cookies  in the  request  sent 
    // to the API (eg. in case you can see sessions )
    res.setHeader('Access-Control-Allow-Credentials','false');

    // pass to the next layer of middleware
    next();

);

【讨论】：

尝试使用这个自定义中间件，而不是你用过的cors middileware

我遇到了与上面给出的相同的错误。 :(

@AbhishekKumar 尝试指定 url 而不是 *

在客户端请求上设置请求头 Access-Control-Allow-Origin','*'。

如何在客户端设置 Access-Control-Allow-Origin','*' ??