面试题：Vue网络请求中如何处理跨域问题

Question

在Vue项目中，使用Axios进行网络请求时经常会遇到跨域问题，请描述几种常见的解决跨域问题的方法，并说明在Vue项目中的具体实现方式。

Answer 1

1. 使用代理服务器

• 原理：通过在本地搭建一个代理服务器，将跨域请求转发到目标服务器，由于是同域请求，从而避开浏览器的跨域限制。
• Vue项目实现方式：在vue.config.js文件中配置代理（如果没有此文件需手动创建）。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://target-server-url', // 目标服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

在代码中使用Axios请求时，请求地址使用/api开头，如axios.get('/api/data')。

2. CORS（跨域资源共享）

• 原理：服务端设置响应头，允许特定来源的请求访问资源，浏览器在发现响应头中有允许跨域的标识后，就会允许此次跨域请求。
• Vue项目实现方式：Vue项目本身无需特别配置，主要在服务端进行设置。以Node.js + Express为例：

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有来源访问，生产环境建议设置具体来源
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});
// 其他路由和处理逻辑

3. JSONP

• 原理：利用<script>标签没有跨域限制的特性，通过动态创建<script>标签，请求一个带参数的跨域JSON数据接口，服务端返回一段可执行的JavaScript代码，该代码会将数据以函数调用的形式返回。
• Vue项目实现方式：由于Axios本身不支持JSONP，可借助jsonp库。首先安装jsonp：npm install jsonp --save。然后在组件中使用：

import jsonp from 'jsonp';
export default {
  methods: {
    fetchData() {
      jsonp('http://target-server-url?callback=jsonpCallback', (err, data) => {
        if (!err) {
          console.log(data);
        }
      });
    }
  }
};

需注意服务端也要支持JSONP格式的响应。