Vue+axios 解决跨域

Vue + axios 如何解决跨域问题？

跨域问题是由于浏览器的同源策略限制导致的，同源策略是浏览器的一种安全策略，目的是保障用户的信息安全，防止恶意网站窃取数据。同源策略的限制是，当在浏览器中发起一个跨域请求时，浏览器会拦截请求，不允许发送和接收任何数据。

解决跨域问题的方法有很多种，以下是其中几种

服务端设置CORS

服务端可以通过设置CORS（跨域资源共享）来允许跨域请求。CORS是一种机制，允许服务器端支持跨域访问。设置CORS时，服务端需要在响应头中添加Access-Control-Allow-Origin字段，指定允许访问的来源。例如，在Node.js的Express框架中，可以使用cors中间件来实现CORS。

使用JSONP

JSONP是一种跨域解决方案，利用script标签不受同源策略的限制，动态创建script标签来实现跨域请求。JSONP的原理是将需要获取的数据包装在一个函数中，服务端返回一个类似于callback(data)的响应数据，前端利用script标签来执行该函数并获取数据。

使用反向代理

使用反向代理是一种常用的解决跨域问题的方法。在前端页面中发送请求时，将请求发送到同源的服务器上，由该服务器进行跨域请求，获取数据后再返回给前端页面。常见的反向代理服务器有Nginx、Apache等。

使用axios的代理功能

在Vue项目中使用axios时，可以通过配置axios的代理来解决跨域问题。在vue.config.js中添加如下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',  // 需要跨域的目标url
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',  // 将请求的路径重写为 /api 后为空
        },
      },
    },
  },
};