Angular 2 CORS问题

Question

我有下面的Angular 2 http请求；

​

const endpoint = '<auth_url>';
const body = {
  prompt: 'consent',
  grant_type: 'authorization_code',
  redirect_uri: '<redirect_url>',
  code: '<authorization_code>'
};

const headers = new Headers();
headers.append('Authorization', 'Basic <auth>');
headers.append('Content-Type', 'application/x-www-form-urlencoded')

const options = new RequestOptions({ headers });

this.http.post(endpoint, body, { headers: headers })
.map(res => res.json())
.subscribe(
  data => console.log(JSON.stringify(data)),
  error => console.error(JSON.stringify(error)),
  () => console.log('Request complete')
);

​

这是连接到已附加到ExpressJS实例的node-oidc-provider，我遇到的问题是CORS，因为由于印前检查，请求最终作为服务器上的选项。这不应该是这种情况，因为我已经如上所述指定了Content-Type标头。令人恼火的是，我试图弄清楚这是服务器还是我的Angular2代码的问题？

我需要显式地在ExpressJS应用程序上启用CORS吗?如果不需要，为什么在POST上设置正确的标头不会有任何影响？

Answer 1

可以，您需要在服务器端开启CORS。这是如果你对服务器有控制权的话。以下是应从服务器返回以启用CORS的标头

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept

你可以分享一些关于你的服务器的细节，比如你是否想要从代码中或者在WebServer中添加这些头文件。

关于为什么在POST请求中设置headers没有效果的问题。浏览器在您的XHTTP请求之前发出一个OPTION请求，向服务器请求接受CORS的权限。

因此，如果您可以控制服务器，那么您可以添加我前面提到的头文件。如果没有，那么你可以使用一些浏览器插件来克服这个检查。

以下是开发人员工具中的网络选项卡的外观

​

​