axios.delete cors错误

原创

mob64ca12dc54c5 2023-08-11 10:42:46 ©著作权

文章标签 跨域 ios 代理服务器 文章分类 iOS 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12dc54c5的原创作品，请联系作者获取转载授权，否则将追究法律责任

axios.delete 跨域错误

在前端开发中，我们经常会使用 axios 这个库来发送网络请求。然而，当我们使用 axios 发送 DELETE 请求时，有时会遇到跨域错误的问题。本文将为你详细介绍什么是跨域错误以及如何解决这个问题。

什么是跨域错误？

在浏览器的同源策略下，JavaScript 只允许从相同源加载的资源进行交互。所谓“同源”指的是协议、域名和端口号都相同。如果发送的请求与当前页面的源不同，就称为跨域请求。由于安全原因，浏览器默认禁止跨域请求，而会报错。

例如，我们的网页运行在上，如果我们使用 axios 发送 DELETE 请求到

解决跨域错误的常见方法

在服务器端配置 CORS

一种常见的解决跨域问题的方法是在服务器端配置 CORS（跨域资源共享）。CORS 是一种机制，允许服务器在响应中设置一些头部信息，告诉浏览器允许进行跨域访问。以下是一个使用 Express 框架配置 CORS 的示例代码：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// 处理 DELETE 请求的路由
app.delete('/api/delete', (req, res) => {
  // 处理 DELETE 请求的逻辑
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

上述代码中，通过设置 Access-Control-Allow-Origin 头部信息为 *，允许任何来源进行跨域访问。如果你想指定具体的来源，可以将 * 替换为你的域名。

使用代理服务器

另一种解决跨域问题的方法是使用代理服务器。我们可以在本地起一个服务器，将请求代理到目标服务器，从而避免跨域问题。以下是一个使用 http-proxy-middleware 库实现代理服务器的示例代码：

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

const app = express();

app.use('/', createProxyMiddleware({ target: ' changeOrigin: true }));

app.listen(3000, () => {
  console.log('Proxy server is running on port 3000');
});

上述代码中，我们将所有请求代理到 changeOrigin为true，表示发送请求时将原始的Host` 头部信息替换为目标服务器的域名。