CORS - 选项 ... 404(未找到)

Posted

技术标签:

【中文标题】CORS - 选项 ... 404(未找到)【英文标题】:CORS - OPTIONS ... 404 (not found) 【发布时间】:2017-10-08 14:46:41 【问题描述】:

您好,我遇到了 CORS 问题。

一般结构:

Angular 4 将表单的数据发送到我的 api。 函数saveForm()在我发送表单联系人信息时被执行。

app.component.ts

saveForm() 

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let requestOptions = new RequestOptions( headers: headers );

    // Encode JSON as string to exchange data to web server.
    this.data = JSON.stringify(this.myContact);

    this.http.post('https://pablocordovaupdated.herokuapp.com/api', this.data, requestOptions).subscribe(res => 
            let result = res.json();
            if(result['result'] == 'success') 
                this.successMessage = true;
            
        
    );


这是问题的根源,因为我正在使用 POSTContent-Type->application/json 发送我的数据,根据定义它给我带来了 CORS 的问题 - preflighted request,这里有更多定义:Link about preflighted request

这意味着在 Angular 4 将数据发送到服务器之前,这会询问服务器是否可以使用动词 OPTION 接收我的数据,如果服务器的响应正常则 Angular 4 发送表单的数据.

问题:

在控制台中我总是收到以下错误消息:

选项https://pablocordovaupdated.herokuapp.com/api 404(未找到)

XMLHttpRequest 无法加载 https://pablocordovaupdated.herokuapp.com/api。对预检的响应 请求未通过访问控制检查:否 请求中存在“Access-Control-Allow-Origin”标头 资源。原点 'https://pablocordova.herokuapp.com' 因此不是 允许访问。响应的 HTTP 状态代码为 404。

XHR 加载失败:POST “https://pablocordovaupdated.herokuapp.com/api”。

错误响应 _body: ProgressEvent, status: 0, ok: false, statusText:“”,标题:标题...

我尝试了什么:

到目前为止,我知道这个问题是因为 https://pablocordovaupdated.herokuapp.com/api 没有返回动词 OPTIONS 的答案

然后我尝试通过两种方式解决这个问题:

使用 cors 包 CORS package 我根据文档进行了配置。

var express = require('express');
var cors = require('cors');
...
var app = express();
...
app.options('/api', cors());
app.post('/api', cors(), function(req, res, next) 

    // Proccess to send this data via email
    // and also save in data base(only for learning)

);

但我在控制台中遇到同样的错误。

手动配置标题 Discussion *** 或 Discussion Github

在我的情况下,该代码被插入到我要编写标头的每条路由中:

app.post('/api', function(req, res, next) 

    if (req.method === 'OPTIONS') 
          console.log('!OPTIONS');
          var headers = ;
          // IE8 does not allow domains to be specified, just the *
          // headers["Access-Control-Allow-Origin"] = req.headers.origin;
          headers["Access-Control-Allow-Origin"] = "*";
          headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS";
          headers["Access-Control-Allow-Credentials"] = false;
          headers["Access-Control-Max-Age"] = '86400'; // 24 hours
          headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept";
          res.writeHead(200, headers);
          res.end();
     else 
        // Process to send this data via email
        // and also save in data base(only for learning)
     

);

这里的问题是永远不要执行console.log('!OPTIONS');

这里我也试过了:

app.post('/api', function(req, res, next) 
    console.log('!I AM YOUR FATHER');
    ...
);

但从不打印。 注意:我尝试使用heroku logs 来查看此消息,因为整个页面都在 Heroku 中。

但这样做我也会遇到同样的错误。

更多信息:

.../api 被调用时,我有这个标题

**GENERAL**:

Request URL:https://pablocordovaupdated.herokuapp.com/api
Request Method:OPTIONS
Status Code:404 Not Found
Remote Address:23.21.185.158:443
Referrer Policy:no-referrer-when-downgrade

**RESPONSE HEADERS**:

HTTP/1.1 404 Not Found
Connection: keep-alive
Server: Cowboy
Date: Wed, 10 May 2017 04:14:45 GMT
Content-Length: 494
Content-Type: text/html; charset=utf-8
Cache-Control: no-cache, no-store

**REQUEST HEADERS**:

OPTIONS /api HTTP/1.1
Host: pablocordovaupdated.herokuapp.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: https://pablocordova.herokuapp.com
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: https://pablocordova.herokuapp.com/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: es-ES,es;q=0.8

问题:

这是我真正的问题还是我理解不好? 和/或 我能做些什么来解决这个问题? 和/或 有什么建议吗?

谢谢。

【问题讨论】:

哇,你做了非常详细的研究。但是您缺少一个主要问题。响应状态码。即 404。请验证您的端点 URL 是否正确。 ! 谢谢,我不敢相信我没有意识到端点 URL 是错误的,谢谢! 大多数情况下,问题将是一个小错字,我们会考虑所有超级骗子的情况。但这就是我们不断学习的方式。继续学习......荣誉...... 【参考方案1】:

问题似乎是https://pablocordovaupdated.herokuapp.com/api总是返回404:

$ curl -i https://pablocordovaupdated.herokuapp.com/api
HTTP/1.1 404 Not Found

也就是说,服务器没有为 OPTIONS 请求做任何特殊/不同的事情——相反,所有请求都只是达到了 404。

app.post('/api', function(req, res, next) 
    console.log('!I AM YOUR FATHER');
    ...
);

我不太清楚 Express 如何处理这种情况,但可能必须将其配置为为该路由发送一些类型的响应,而不仅仅是服务器上的 console.log一边。

当我查看 https://pablocordovaupdated.herokuapp.com/api 的内容时,我看到的只是一个通用的 Heroku 404 页面,因此它不是从您的应用程序提供的,而是由 Heroku 提供的。例如,那个 404 页面的内容是这样的:

<iframe src="//www.herokucdn.com/error-pages/no-such-app.html"></iframe>

也就是说,在任何情况下,您的应用代码似乎都不会按预期处理对该 URL 的请求。所以看来这就是你需要先解决的问题。

【讨论】:

谢谢!!!我不知道我怎么没有意识到真正的端点必须是:pablocordova.herokuapp.com/api,再次感谢我试图解决这个问题几乎 2 小时。

以上是关于CORS - 选项 ... 404(未找到)的主要内容,如果未能解决你的问题,请参考以下文章

Rails 在 CORS 预检选项请求中以 404 响应

404 for web.api cors 选项

CORS 问题,HapiJS HAPI-16

我的 IIS 提示 HTTP 错误 404 - 文件或目录未找到。

我的 IIS 提示 HTTP 错误 404 - 文件或目录未找到。

JavaScript 文件 net::ERR_ABORTED 404(未找到)