角度 2：如何处理预检响应具有无效的 HTTP 状态代码 400。错误请求

Question

我试图使用我的洋红色的 Rest api 获取 HTTP GET 请求。

下面是实现相同目的的 angular2 代码！

 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 问题。

选项 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

在谷歌解决方法后，我已经尝试了以下步骤来修复相同的问题，但没有成功。

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

标头集访问控制允许源“*”

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

headers.append（'Access-Control-Allow-Headers'， 'Content-Type'）;...

...

3） 尝试从应用程序/json 更改内容类型

let headers = new Headers（{ 'Accept'： 'application/json' }）;

我错过了什么。

需要适当的解决方案来解决 CORS（从洋红色 2 到 angular2）问题。

欢迎提出建议！

Answer 1

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

从安全角度来看，让全球跨源访问Magento（我知道这是一个购物平台）听起来是一个非常糟糕的主意。

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

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

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

您是否有理由认为服务器由于您的默认设置而引发错误？

返回并查看错误消息：

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

然后做一些基础研究来了解什么是预检。

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

所以：

• 浏览器正在发出选项请求
服务器
• 响应 500 内部服务器错误（可能是因为它尚未编程为响应 OPTIONS 请求）。

这意味着您需要查看服务器端代码（因此根本不是JS）并确定它为什么会抛出500错误。服务器的错误日志将是开始查找的好地方。

您需要让服务器按照 CORS 文档中的规则正确响应 OPTIONS 请求。

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