跨域配置

当使用Vue CLI创建的项目时，可以通过配置vue.config.js文件来实现使用Axios跨域访问服务。

以下是详细的步骤：

在你的Vue CLI项目根目录下创建一个 vue.config.js 文件（如果已经存在则直接打开）。
在 vue.config.js 文件中，可以使用 devServer 选项进行配置。

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://example.com',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

上述配置中，我们使用了修改的 devServer 对象，并配置了 proxy 属性。该属性指定了我们要代理的请求路径，以及目标服务器的地址。

^/api：这里代理的是以 /api 开头的请求路径。你可以根据你的实际需求进行修改。
target：目标服务器的地址，这里使用了 http://example.com 作为示例。你需要将其替换为你实际的目标服务器地址。
ws：启用WebSocket代理。默认情况下，这是关闭的，但在某些情况下可能需要启用。
changeOrigin：启用更改源。在开发环境中，这是必需的，否则请求头中的 host 字段会被设置为代理服务器的主机名。

保存文件并重新启动开发服务器。

现在，你可以在你的Vue组件中使用Axios来发送请求：

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

这里的/api/data请求路径会被代理到目标服务器http://example.com/api/data。

请注意，这个配置仅适用于开发环境。在生产环境中，你需要在服务器端进行跨域访问的相关配置。

pathRewrite属性

如果你想在/api/data前面添加额外的路径，可以通过配置pathRewrite来实现。以下是修改后的示例代码：

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://example.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/your-prefix/api'
        }
      }
    }
  }
}
// 或者 由 /your-prefix/data -> /api/data
module.exports = {
  devServer: {
    proxy: {
      '^/your-prefix': {
        target: 'http://example.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/your-prefix': '/api'
        }
      }
    }
  }
}

上述配置中，我们使用了pathRewrite属性来修改请求路径。具体来说，我们将以/api开头的请求路径修改为以/your-prefix/api开头的路径。

例如，如果你发送的请求路径是/api/data，它将被代理为http://example.com/your-prefix/api/data。

这样，你就可以在路径前面添加额外的路径。你可以根据你的实际需求修改/your-prefix为你需要的路径。

pathRewrite属性会将key值替换成value值

部署

在部署之后，Webpack Dev Server 的代理配置只适用于开发环境，在生产环境下是不会生效的。因此，如果你需要进行路径重写或跨域代理，你可能需要考虑其他解决方案。

在生产环境中，你可以通过配置反向代理服务器（如 Nginx 或 Apache）来实现路径重写和跨域代理。具体的配置方法将取决于你使用的服务器软件。

以下是一个使用 Nginx 进行路径重写和跨域代理的示例：

server {
  listen 80;
  server_name your-domain.com;

  location /your-prefix/ {
    proxy_pass http://example.com/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    rewrite ^/your-prefix/(.*)$ /api/$1 break;
  }
}

上述配置中，我们将以 /your-prefix/ 开头的请求代理到 http://example.com/，并在代理过程中进行路径重写，将 /your-prefix/ 替换为 /api/。

请注意，这只是一个示例配置，具体的配置方法可能会根据你的需求和服务器环境而有所不同。

因此，在部署应用程序时，请确保你熟悉你正在使用的服务器软件，并根据需要进行适当的配置。

vue-cli使用axios跨域访问服务

跨域配置

pathRewrite属性

部署

猜你喜欢