vue中页面请求出现跨域，应该怎么配置

在 Vue 中出现跨域问题，可以通过配置代理来解决。

1. 在 `vue.config.js` 文件中进行配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 代理接口地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 重写接口
        }
      }
    }
  }
}

2. 在代码中发送请求时，将接口地址改为代理地址：

axios.get('/api/list')

这样，请求就会被代理到 `http://localhost:3000/list`，从而解决跨域问题。

需要注意的是，以上配置只在开发环境下生效，生产环境需要在服务器端进行配置。

相关问题

vue中页面请求出现跨域，应该怎么配置实现所有地址都可以访问

在 Vue 中出现跨域问题，一般是因为前端请求的地址与后端提供的地址不一致导致的。为了解决这个问题，你需要在 Vue 的配置文件中进行一些设置，以便让所有地址都可以访问。

首先，你需要在 `config/index.js` 文件中配置代理，如下所示：

module.exports = {
  // ...
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000', // 后端接口地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 重写接口
        }
      }
    }
  }
  // ...
}

这里的配置意思是，将以 `/api` 开头的请求转发到 `http://localhost:3000` 上，并且开启跨域。另外，还需要对接口进行重写，将 `/api` 去掉。

接下来，在项目中发送请求时，只需要在请求地址前加上 `/api` 就可以了，如下所示：

axios.get('/api/user').then(response => {
  // ...
})

这时候，你就可以愉快地进行跨域请求了。

vue中如何处理跨域请求

在Vue中处理跨域请求，可以通过以下几种方式：

1. 在后端服务器上设置允许跨域请求的响应头。例如，在Express框架中，可以使用cors中间件来设置跨域请求头：

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

2. 使用Vue的代理设置。在Vue的配置文件vue.config.js中，可以使用devServer.proxy属性来设置代理：

module.exports = {
  devServer: {
    proxy: 'http://example.com'
  }
}

这样，所有以/api开头的请求都会被代理到http://example.com域名下。

3. 使用JSONP。JSONP（JSON with padding）是一种跨域请求的解决方案，可以在前端页面中通过动态创建<script>标签来实现。在Vue中，可以封装一个JSONP请求的方法来处理跨域请求：

function jsonp(url, params) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    const callbackName = 'jsonp_callback_' + Date.now();
    const query = params ? '&' + Object.keys(params).map(key => {
      return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
    }).join('&') : '';

    window[callbackName] = function(data) {
      delete window[callbackName];
      document.body.removeChild(script);
      resolve(data);
    };

    script.src = url + '?callback=' + callbackName + query;
    document.body.appendChild(script);
  });
}

这样，就可以使用jsonp函数来发起跨域请求了。