如何避免在单页应用程序中进行CORS预检请求？

Question

bounty到期在7天内。该问题的答案有资格获得+ 100声望赏金。Martin Löper正在寻找规范答案：

我相信这个问题对于在公共云中设计SPA的建筑师或开发人员来说并不罕见。

我想构建一个单页应用程序（SPA），并且在分离后端API（REST）和前端资产（静态vue.js代码）：

期间注意到以下问题。

当从API后端以外的其他域提供index.html时，大多数POST / PUT请求都会触发CORS预检请求。

我进行了一些研究，发现博客文章[1] [2]讨论了此问题，但没有给出实际的解决方案。某些标头（例如Authorization标头和带有application / json值的Content-Type标头）不允许作为cors-safelisted-request标头。因此，POST / PUT请求会触发CORS预检请求。这是不可接受的，因为它会增加大量的延迟。

问题

如果两个域都属于同一实体，是否可以避免这些预检请求？

研究

我做了一些关于如何避免前端和后端之间的CORS请求的研究。解决方案要求将index.html文件从与REST API后端相同的域中提供（请参见下面的示例）。我想知道是否不使用单独的域是避免CORS请求SPA的唯一解决方案。

场景（示例）

• 单页应用程序（SPA）；前端和后端层
• 托管在AWS云中
• 第1层：具有S3存储桶源的CloudFront CDN-在static.example.com上投放静态资产（Vue.js前端）。>
• 第2层：具有ECS集成的负载均衡器，它正在运行node.js容器来承载example.com
上的（REST）后端。>
• 第1层和第2层之间的通信使用HTTPS协议和REST范例。
• index.html由第2层提供，客户使用example.com
打开Webapp。
• index.html通过指向同一域（example.com）来引用API。它通过指向CDN（static.example.com
）引用静态Vue资产。
• SPA由两部分组成：a）公共资产（.js文件，.css文件等）和b）index.html文件。后者由相同的后端容器组成，这些后端容器也托管REST API。

参考

[1]https://www.freecodecamp.org/news/the-terrible-performance-cost-of-cors-api-on-the-single-page-application-spa-6fcf71e50147/[2] https://developer.akamai.com/blog/2015/08/17/solving-options-performance-issue-spas

我想构建一个单页应用程序（SPA），并且在分离后端API（REST）和前端资产（静态vue.js代码）时注意到以下问题：从...提供index.html时...

] >

那里没有很多选择。

最简单的解决方案是从与您的API相同的域中提供html和资产。

第二个选项是仅使用cors-safelisted-request-header的标头。

我注意到：

Content-Type标头可以替换为Accept标头。此标头可以。

如果正在执行XHR请求，则可以通过将XHR请求的Authentication字段设置为true来省略withCredentials标头，而是自动添加身份验证信息。 VanillaJS示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.example.org/api/whatever', true);
xhr.withCredentials = true;
xhr.send();
如果使用其他XHR客户端，请参阅文档以了解是否可以设置该选项。
另一种选择是通过cookie和服务器端会话进行身份验证。当您使用AWS时，可以选择使用AWS Cognito。
如果正在使用的标头不是安全列出的CORS标头，则必须删除它们。

Answer 1

那里没有很多选择。