在进行POST和DELETE请求之前禁用OPTIONS请求

Question

我有一个基于TypeScript的React应用程序，它托管在我的计算机上。 我使用Spring网关将请求转发到另一个微服务。 GET请求运行正常，但对于POST请求，我得到了以下错误：

Access to XMLHttpRequest at 'http://1.1.1.1:8080/api/support/tickets/create' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我遇到了这个Spring Cloud Gateway问题：https://github.com/spring-cloud/spring-cloud-gateway/issues/229 React代码：

export async function getTicket(id: string) {
  return await axios.get(`${baseUrl}/support/tickets/ticket/${id}`);
}

export async function postTicket(
    data: TicketFullDTO
): Promise<AxiosResponse<TicketFullDTO>> {
  return await axios.post<TicketFullDTO>(
      `${baseUrl}/support/tickets/create`, data);
}

您知道我如何在进行POST和DELETE请求之前禁用OPTIONS请求吗？

- Peter Penzov

---

https://dev59.com/0lIH5IYBdhLWcg3wHJGn - hoangdv

这与React无关，你需要适当地响应OPTIONS请求，这是一个服务器端的问题。也许这篇文章能帮到你，我不确定。https://dev59.com/vFwX5IYBdhLWcg3w0iUc - inf3rno

这里的另一个问题是“No 'Access-Control-Allow-Origin' header”，你应该在服务器端设置它。如果你的 API 不是公开可访问的，那么你应该允许非常具体的来源，比如 www.myapi.com，而不是使用 *。 - inf3rno

Answer 1

• 从服务器端，你可以在POST路由中加入判断req.method==="OPTIOINS"来返回结果。

• 因为axios设置了自定义的HTTP请求头'application/json'，所以会自动发送OPTIONS请求。如果请求头是'application/xml'或'application/json'，则"OPTIONS"请求也会自动发送。尝试在你的POST或DELETE请求中设置请求头，如'application/x-www-form-urlencoded'。

• 或者你可以在客户端设置代理。

如果你使用的是create-react-app，在src文件夹中创建setupProxy.js文件。

 npm install http-proxy-middleware --save

http-proxy-middleware有许多选项。

然后在setupProxy.js中操作。

const { createProxyMiddleware } = require('http-proxy-middleware');


module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3080',
      changeOrigin: true,
    })
  );
};

如果您正在使用webpack，可以参考https://webpack.js.org/configuration/dev-server/来配置开发服务器。

devServer: {
   historyApiFallBack: true,
   contentBase: path.resolve(__dirname, 'public'),
   proxy: {
      '/v1/**': {
         target: 'http://url',
         secure: false,
         changeOrigin: true
      }
   }
},

- Yilmaz

Answer 2

如果您计划将React应用程序和后端托管在同一URL /端口上，并且仅在开发中遇到此问题，则可以设置本地开发服务器将所有请求代理到您的后端。

在package.json文件中添加：

```json "proxy": "http://localhost:5000" ```

"proxy": "your-backend-base-url"

然后，您应该使用相对URL执行后端调用。

- Mordechai

Answer 3

OPTIONS预检请求与CORS策略有关，它是由浏览器自动发送的，因此无法禁用。

如果您可以访问服务器代码，可以在响应消息中添加Access-Control-Allow-Origin: YOUR_DOMAIN头。

您可以在这里查看如何在Spring Cloud Gateway中配置CORS。

- NeNaD

---

有什么想法可以将此添加到Spring Cloud Gateway配置中吗？ - Peter Penzov

不要使用原始的 *，请使用特定的域名。 - Bergi

我更新了答案，并提供了配置CORS文档的链接。你能看一下吗？@PeterPenzov - NeNaD

你说得对。我已经更新了我的答案。@Bergi - NeNaD

我尝试了这个：cloud: gateway: globalcors: cors-configurations: '[/**]': allowedOrigins: "http://localhost:3000" allowedMethods: - GET 但是它还是不起作用。 - Peter Penzov