vue cli本地开发跨域问题解决

Vue CLI本地开发跨域问题可以通过以下几种方式进行解决：

1. 使用代理：在`vue.config.js`中配置`devServer.proxy`，将请求代理到目标服务器，如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2. 使用webpack-dev-server提供的配置项：在`vue.config.js`中配置`devServer.headers`和`devServer.disableHostCheck`，如：

module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    disableHostCheck: true
  }
}

3. 使用Chrome浏览器插件：如`CORS Unblock`或`Allow CORS: Access-Control-Allow-Origin`等插件，可以在本地开发中解决跨域问题。

注意：以上方法只适用于本地开发环境，生产环境需要在服务器端进行跨域处理。

相关问题

vue cli4 解决跨域问题后用localhost可以访问使用ip地址无法被解析导致请求路径出

在Vue CLI 4中解决跨域问题后，可以通过localhost访问接口，但使用IP地址无法被解析，导致请求路径出错的问题，可能是由于以下原因导致的：

1. 浏览器的同源策略：同源策略要求请求的协议、域名、端口均相同。使用localhost访问时，请求的协议、域名和端口均为相同的localhost，符合同源策略，因此能够正常访问接口；而使用IP地址访问时，与localhost的域名不同，不符合同源策略，浏览器会拦截请求。

2. API配置问题：可能在Vue项目中配置了跨域请求时，只允许localhost的请求通过，而将IP地址没有添加到允许列表中，导致请求路径出错。

解决此问题的方法如下：

1. 配置vue.config.js：在Vue项目的根目录下找到vue.config.js文件，如果没有则手动创建。在该文件中，添加devServer选项，设置proxy代理，将需要访问的API接口的域名和端口添加到proxy的target中，示例代码如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 需要访问的API接口的域名和端口
        ws: true,
        changeOrigin: true
      }
    }
  }
};

2. 使用IP地址访问：在Vue项目中，使用IP地址访问API接口时，将请求路径改为相对路径，如`/api/getData`，而不是绝对路径`http://localhost:8080/api/getData`。这样配置后，不论使用localhost还是IP地址访问，请求都会通过proxy转发到正确的接口地址。

通过以上操作，可以解决在Vue CLI 4中使用IP地址访问接口无法解析导致请求路径出错的问题。

vue/cli5.0跨域

在Vue/cli5.0中，要解决跨域问题可以通过以下几种方式：

1. 使用代理服务器：在vue.config.js中配置devServer.proxy，将请求转发到其他域名。例如，设置target为目标服务器地址，将请求发送到目标服务器，从而避免跨域问题。

2. JSONP跨域：如果目标服务器支持JSONP，可以使用JSONP来进行跨域请求。在Vue中可以使用axios库，并通过配置axios的jsonp参数来发送跨域请求。

3. CORS跨域：在后端服务器的响应中添加Access-Control-Allow-Origin等头信息，允许跨域请求。Vue中可以通过在服务器端设置响应头，或者在axios请求中添加选项来实现CORS跨域。

4. 使用Webpack的DevServer配置：在vue.config.js中通过配置devServer来实现跨域。设置proxy选项来指定要代理的路由，例如将/api路由指向目标服务器地址。

需要注意的是，以上方法都需要在开发环境下生效，生产环境可以通过配置Nginx或其他反向代理服务器来处理跨域问题。

以上是几种常见的解决Vue/cli5.0跨域问题的方式，具体选择哪种方式取决于你的项目需求和后端服务器的支持情况。