vue中怎么在devserver中解决跨域问题

可以通过配置webpack.dev.conf.js文件来解决vue中的跨域问题，具体方法如下：

1. 在config目录下新建一个文件proxyTable.js，用来配置跨域代理。

2. 在webpack.dev.conf.js文件中引用proxyTable.js文件，并在devServer中的proxy属性配置中增加proxyTable.js中的代理设置。

例如，你的后端服务地址是http://localhost:8080，而你的前端开发地址是http://localhost:8081，那么你可以在proxyTable.js文件中配置如下的代理：

module.exports = {

"/api": {

target: "http://localhost:8080",

changeOrigin: true,

pathRewrite: {

"^/api": ""

}

}

}

在webpack.dev.conf.js文件中引用proxyTable.js文件，并在devServer中的proxy属性配置中增加上面的代理设置：

const proxyTable = require('./proxyTable')

devServer: {

proxy: proxyTable

}

这样，当你在前端访问/api/foo时，代理会将请求转发到http://localhost:8080/foo。这样就能解决vue中devserver的跨域问题了。

相关问题

在html中引入vue怎么解决跨域问题

在使用Vue时，如果后端接口地址和前端Vue应用地址不在同一个域名下，就会出现跨域问题。为了解决这个问题，可以采用以下几种方法：

1. 在后端接口中设置允许跨域访问的响应头

在后端接口代码中，设置响应头Access-Control-Allow-Origin为前端Vue应用地址，例如：

header('Access-Control-Allow-Origin: http://localhost:8080');

这里的'http://localhost:8080'就是前端Vue应用的地址，设置了该响应头后，前端Vue应用就可以跨域访问后端接口了。

2. 使用代理服务器解决跨域问题

在Vue应用的配置文件中，可以通过配置代理服务器来解决跨域问题。例如：

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

这里的'/api'是前端Vue应用请求的接口地址，'http://localhost:3000'是后端接口的地址，配置了代理服务器后，前端Vue应用就可以通过访问'/api'来请求后端接口了。

3. 使用JSONP解决跨域问题

JSONP是一种跨域解决方案，它通过动态创建script标签来实现跨域请求。在Vue中可以使用VueJsonp插件来实现JSONP请求。例如：

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

Vue.jsonp('http://localhost:3000/api', {}).then((response) => {
  console.log(response)
}).catch((error) => {
  console.log(error)
})

这里的'http://localhost:3000/api'是后端接口地址，使用VueJsonp插件可以发送JSONP请求获取后端接口数据。

vue中axios解决跨域问题

在Vue中使用axios解决跨域问题可以通过以下几种方式：

1. 代理请求：在`vue.config.js`文件中配置代理来解决跨域问题。示例如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 你要请求的后端接口地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' // 如果接口中有/api前缀，可以将其去除
        }
      }
    }
  }
}

然后在你的Vue组件中使用axios发送请求，将请求地址的前缀改为`/api`即可，示例如下：

axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

2. JSONP：如果后端接口支持JSONP，可以使用axios-jsonp插件来发送JSONP请求。安装axios-jsonp插件：

npm install axios-jsonp

然后在你的Vue组件中使用axios-jsonp发送请求，示例如下：

import axiosJsonp from 'axios-jsonp';

axios({
  url: 'http://api.example.com/users',
  adapter: axiosJsonp
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

3. CORS设置：如果你有权限修改后端接口的响应头，可以在后端接口中设置CORS，允许指定的域名访问接口。示例如下：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); // 允许指定的域名访问接口
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 允许的请求方法
  res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允许的请求头
  next();
});

请根据你的具体情况选择适合的解决方案来解决Vue中的跨域问题。