Angular 2:如何处理预检响应具有无效的HTTP状态代码400.错误的请求 [英] Angular 2: how to deal with Response for preflight has invalid HTTP status code 400. Bad request

问题描述

我正在尝试使用我的magento的Rest api获取HTTP GET请求.

Im Trying to get HTTP GET request using Rest api of my magento.

下面是实现相同功能的angular2代码.

Below is the angular2 code to achieve the same!.

 public ngOnInit() {
    let headers = new Headers({ 'Accept': 'application/json' });
    headers.append('Authorization', 'Bearer x9a278mu7xoh4k0jkj08doc5j4b3ac22');
    headers.append('Access-Control-Allow-Headers', 'Content-Type');
    headers.append('Access-Control-Allow-Methods', 'GET');
    headers.append('Access-Control-Allow-Origin', '*');

    let options = new RequestOptions({ headers: headers });
    return this.http.get('http://10.2.../Mage_ang2/index.php/rest/V1/customers/1',options)
        .map(response => console.log(response.json))
        .subscribe((items: Person[]) => {
            console.log('items: ' + items);
            this.people = items;
        }, error => console.log(error));

 }

我(假设)遇到了CORS问题.

I Get (which im assuming) a CORS issue.

OPTIONS http://10.2.../Mage_ang2/index.php/rest/V1/customers/1

XMLHttpRequest无法加载 http://10.2.../Mage_ang2/index.php/rest/V1/customers/1 .飞行前的响应具有无效的HTTP状态代码500

XMLHttpRequest cannot load http://10.2.../Mage_ang2/index.php/rest/V1/customers/1. Response for preflight has invalid HTTP status code 500

在解决Google问题后，我尝试了以下步骤以解决相同问题，但未成功.

I have tried the below steps after workaround in google to fix the same, but unsuccessful.

1)在magento .htaccess文件中，添加了

1) In magento .htaccess file, added

标头集访问控制允许来源"*"

2)在上面添加的角度2代码中，

2) In the above angular 2 code added,

headers.append('Access-Control-Allow-Headers'，'Content-Type'); ...

...

3)尝试从

让标头=新标头({'Accept':'application/json'});

我想念什么.

需要适当的解决方案来修复CORS(从magento2到angular2)问题.

Need the proper solution to fix the CORS (from magento2 to angular2) issue.

建议！

推荐答案

Header set Access-Control-Allow-Origin "*"

从安全的角度来看，对Magento(据我理解是一个购物平台)进行全球跨域访问似乎是一个非常糟糕的主意.

Giving global cross-origin access to Magento (which I understand is a shopping platform) sounds like a very bad idea from a security perspective.

headers.append('Access-Control-Allow-Headers', 'Content-Type'); ...

Access-Control-Allow-Headers是响应标头.服务器必须将其发送给客户端，而不是相反.您的JS无法授予自己访问其他服务器的权限.

Access-Control-Allow-Headers is a response header. The server has to send it to the client, not the other way around. Your JS can't give itself permission to access other servers.

let headers = new Headers({ 'Accept': 'application/json' });

您是否有理由认为服务器因默认设置而引发错误?

Do you have some reason to think that the server was throwing an error because of your default settings?

返回并查看错误消息:

对预检的响应具有无效的HTTP状态代码500

Response for preflight has invalid HTTP status code 500

然后做一些基础研究来学习这是什么预检是.

Then do a bit of basic research to learn what a preflight is.

然后再做一些基础研究，找出 HTTP状态码500的含义.

Then do a bit more basic research to find out what HTTP status code 500 means.

所以:

• 浏览器正在发出OPTIONS请求
• 服务器正在响应 500 Internal Server Error (服务器内部错误500)(大概是因为尚未对其进行编程以响应OPTIONS请求).

• The browser is making an OPTIONS request
• The server is responding with 500 Internal Server Error (presumably because it hasn't been programmed to respond to an OPTIONS request).

这意味着您需要查看您的服务器端代码(而不是您的JS)，并确定为什么引发500错误.服务器的错误日志将是开始查找的好地方.

This means that you need to look at your server side code (so not your JS at all) and identify why it is throwing the 500 error. Your server's error logs will be a good place to start looking.

您需要让服务器根据 CORS文档.

(或者，使用相同的说明，您可以尝试首先阻止浏览器发出预检请求，就像删除所有在请求中未设置CORS响应标头的尝试一样简单不属于.

(Alternatively, using the same instructions, you could try to prevent the browser from making a preflight request in the first place, that could be as simple as removing all the attempts to set the CORS response headers on the request where they don't belong).

这篇关于Angular 2:如何处理预检响应具有无效的HTTP状态代码400.错误的请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！