处理 API 跨域问题

为了让 Web 应用程序跨不同的源发出请求（即向不同于请求页面的方案、主机名或端口的 URL 发出请求），实现了一组名为跨源资源共享 (CORS) 的规则。每当进行跨源请求时，浏览器都会发送一个 Origin 请求头，服务器必须以匹配的 Access-Control-Allow-Origin (ACAO) 响应头进行响应。如果这两个头不匹配，浏览器将拒绝响应，导致任何依赖于该数据的应用程序组件失效。

这份指南将帮助你启用API的CORS插件，以便你的应用程序能够无缝地在跨域请求之间通信。通过使用CORS插件，你可以轻松地解决由于跨域请求导致的浏览器拒绝响应的问题，确保你的应用程序组件能够正常工作，为你的用户提供更加流畅的体验。

背景知识

了解CORS插件。

前置要求

1. 参考对应文档 新建 API。

为工作分区内所有 API 启用 CORS

假设我们要为工作分区内所有已有 API 及未来可能会增加的 API, 都启用相同的 CORS 配置，只允许cors.test.com来源的请求。

为此，我们需要将 CORS 插件作为全局插件启用。

参考对应文档 启用全局插件。

在【9. 选择需要启用的插件，点击对应的 启用 按钮】中，选择CORS插件。 在【11. 在 配置Raw Data 中，编辑插件的参数。（可选，部分插件无需配置任何参数即可使用）】中，修改allow_origins字段为cors.test.com。

信息

• allow_origins设置的默认值*，表示允许来自任何站点的CORS请求。
• 如果需要为不同的 API 设置不同的allow_origins设置，则不建议使用全局插件，请参考”为工作区内的特定 API 启用 CORS。“

为工作分区内单个 API 启用 CORS

假设我们要为CreateOrders这个 API 启用 CORS，只允许cors.test.com来源的请求。

创建包含 CORS 插件的插件模板

参考对应文档创建插件模板。

在【9. 选择需要启用的插件，点击对应的 启用 按钮】中，选择CORS插件。 在【11. 在 配置Raw Data 中，编辑插件的参数。（可选，部分插件无需配置任何参数即可使用）】中，修改allow_origins字段为cors.test.com。

信息

• allow_origins设置的默认值*，表示允许来自任何站点的CORS请求。

将插件模板应用到 API

参考对应文档配置 API。

在【9. 编辑 API 的属性】中，将插件模板修改为上一步创建的包含 CORS 插件的插件模板。

验证

借用test-cors网站进行模拟验证。

1. 在网络浏览器中访问https://test-cors.org/。

2. 在test-cors.org网站界面上，你将看到设置请求参数的选项，如URL、HTTP方法、请求头、请求体等。根据你的要求，将目标URL设置为你的CreateOrders这个 API。

3. 在请求头中将Origin头设置为cors.test.com，表示请求来自“cors.test.com”。

4. 点击Fetch或Submit按钮，将 CORS 请求发送到目标 URL。

5. test-cors.org将模拟 Web 浏览器的 CORS 行为，并在网页上显示来自目标服务器的响应。你不应该收到 CORS 错误。

6. 将请求头中的Origin头更改为cors.error.com或其他任意来源，然后单击Fetch或Submit按钮。

7. 你将能够在网页上看到相应的错误信息，如“CORS被阻止”，“从源'cors.test.com'到目标URL的XMLHttpRequest访问已被CORS策略阻止”，等等。