Vue 项目中遇到的跨域问题及解决方法(后台php)

下面给出解决Vue项目中跨域问题的攻略。

1. 跨域问题的背景

在Vue项目中，由于前端代码和后端接口的部署位置不同，涉及到跨域访问的问题。如果没有任何处理，就会出现浏览器的同源策略限制，无法访问到后端接口。因此，需要对跨域问题进行处理。

2. 解决跨域问题的方法

2.1. 后端设置允许跨域访问

后端通过设置http响应头的内容，告知浏览器允许Vue项目的跨域访问。比如，下面的php代码设置了允许Vue项目跨域访问：

header('Access-Control-Allow-Origin: http://localhost:8080'); //允许指定域名访问
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE'); //允许的请求方法
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type'); //允许的请求头

需要注意的是，Access-Control-Allow-Origin头的值一定要明确指定Vue项目所在的地址，比如http://localhost:8080。

2.2. 添加代理伺服器

如果后端无法或者不方便进行设置，我们可以通过添加代理服务器的方式，让浏览器访问代理服务器，代理服务器再去中转访问后端接口。这里以vue-cli4.x脚手架中的vue.config.js文件为例，展示一个常见的设置代理服务器的方式。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888', //目标地址
        changeOrigin: true, //将主机头的原点更改为目标URL
        pathRewrite: {
          '^/api': '/' //重写路径
        }
      }
    }
  }
}

这里配置了一个代理服务器，将Vue项目中的/api开头的请求，代理转发到http://localhost:8888地址的后端接口中，实现了跨域访问的目的。需要注意的是，代理服务器的地址不一定非得和后端一致，只要保证能够代理到后端即可。

3. 示例说明

3.1. 示例1：后端设置允许跨域访问

后端接口代码如下：

<?php
header('Access-Control-Allow-Origin: http://localhost:8080');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE');
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');

$data = array('name' => '张三', 'age' => 20);
echo json_encode($data);
?>

这里设置了跨域访问头，允许Vue项目跨域访问。然后在Vue项目中的代码如下：

export default {
  methods: {
    getData() {
      axios.get('http://localhost:8888/api/data.php')
        .then(response => {
          console.log(response.data)
        })
    }
  }
}

其中，axios是Vue项目中常用的ajax库，用于发送http请求。这里我们使用axios.get()方法，访问后端接口。由于已经设置了跨域访问头，加上我们使用了代理服务器，所以Vue项目和后端接口之间能够实现跨域访问。

3.2. 示例2：添加代理服务器

vue.config.js代码如下：

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

Vue项目中的代码如下：

export default {
  methods: {
    getData() {
      axios.get('/api/data.php')
        .then(response => {
          console.log(response.data)
        })
    }
  }
}

这里我们在Vue项目中的代码中，发送了一个请求/api/data.php，vue-cli脚手架会自动将这个请求代理到http://localhost:8888地址的后端接口中。代理服务器能够访问到后端接口，解决了跨域访问的问题。