vue axios的跨域

目录

代理

重写请求路径

设置withCredentials

---

跨域是指在浏览器中，通过JavaScript发起的请求的目标地址与当前页面的地址不在同一个域（域名、协议、端口号任意一个不同），浏览器会阻止这种跨域请求，以保护用户隐私和安全。当我们使用Axios发送HTTP请求时，如果请求的目标地址与当前页面的域不同，就会触发跨域问题。这可能会导致请求失败，从而影响应用程序的正常运行。

1.代理

在开发环境中，可以使用代理来解决跨域问题。通过在vue.config.js文件中配置代理，将API请求转发到开发服务器，从而绕过浏览器的同源策略。

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      // 配置代理
      '/api': {
        // 目标服务器地址
        target: "http://api.xxx.com",
        // 启用WebSocket（如果需要）
        ws: true,
        // 允许跨域
        changeOrigin: true,
        // 重写请求路径，去掉/api前缀
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

创建script标签实现跨域请求的方法。

axios.jsonp("api/data")
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

1. 配置代理：这部分注释说明了整个代理配置的开始。
2. 目标服务器地址：target字段指定了代理请求的目标服务器地址。
3. 启用WebSocket：如果目标服务器支持WebSocket，可以设置ws为true。
4. 允许跨域：changeOrigin字段表示是否允许跨域。
5. 重写请求路径：pathRewrite字段可以用于重写请求路径，这里的示例是去掉了/api前缀。

2.重写请求路径

假设在代理配置中，将 /api 重写为 /v1，那么在前端代码中发送请求时，只需使用 /api 开头的路径，Axios 会自动将其重写为 /v1。

// 使用 Axios 发送请求
axios.get("/api/data")
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

在上述代码中，/api/data 是前端代码中的路径，但由于代理配置的影响，实际上请求会发送到后端服务器的 /v1/data。

3.设置withCredentials

如果在跨域请求中需要携带认证信息（例如Cookie），需要设置Axios的withCredentials选项为true。

withCredentials 是 XMLHttpRequest 对象的一个属性，用于指示请求是否应该发送包含凭据的请求（例如，包含在请求中的 Cookie 和 HTTP 认证信息）。

在前端开发中，当使用跨域请求时，浏览器通常会将跨域请求中的凭据（如 Cookie、HTTP 认证信息）排除在请求之外，以保护用户的隐私和安全。这是浏览器的一种安全机制，称为同源策略。然而，有时候我们确实需要在跨域请求中携带这些凭据，这时就需要使用 withCredentials。

axios.get("api/data", {
  withCredentials: true
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

请注意，服务器也必须允许接收带有凭据的跨域请求，因为默认情况下，服务器不会接受这样的请求。因此，你还需要在后端配置允许跨域请求携带凭据的设置，具体取决于后端框架和服务器的支持。

4.代理的ws

在使用代理服务器时，特别是在开发环境中，你可能会遇到要同时处理 HTTP 请求和 WebSocket 连接的情况。当使用 Axios 作为 HTTP 请求的客户端时，代理配置通常只处理 HTTP 请求，而 WebSocket 连接则需要特殊的处理。

在一些代理服务器配置中，会有对 WebSocket 的特殊代理配置，通常是通过 ws 或 wss 协议来处理 WebSocket 连接。这是因为 WebSocket 通信与传统的 HTTP 请求有一些不同之处，需要使用不同的协议来进行处理。