vue如何解决跨域？原理？

泡芙·草莓2023-11-11 14:00

Vue.js本身并不直接解决跨域问题，而是依赖于浏览器的同源策略。但是，Vue提供了一些方法来帮助我们解决跨域问题。

原理：

浏览器的同源策略规定，不同源（协议、域名、端口）之间的网络请求受到限制，无法直接进行跨域访问。
Vue通过使用代理、JSONP、CORS（跨来源资源共享）等方式，绕过浏览器的同源策略，实现跨域请求。

方法：

代理方式：
- 在开发环境中，可以配置一个代理服务器，将前端请求发送到同域下的服务器上，再由代理服务器转发请求到目标服务器，从而实现跨域。
- 例如，使用vue.config.js文件配置代理：
  html 复制代码
```
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};
```
  然后，在Vue组件中发送请求时，使用相对路径/api代替完整的URL。
JSONP方式：
- JSONP利用了<script>标签的src属性可以跨域的特性，通过动态创建<script>标签来加载远程脚本，并将数据作为回调函数的参数返回。
- 例如，使用Vue的axios库实现JSONP请求：
  html 复制代码
```
import axios from 'axios';

axios.jsonp('http://example.com/api', {
  params: {
    callback: 'jsonpCallback'
  }
}).then(response => {
  // 处理响应数据
});
```
CORS方式：
- 如果目标服务器允许跨域请求，可以在服务器端设置合适的CORS响应头，允许特定的源进行跨域访问。
- 例如，在服务器端的响应中添加以下响应头：
  html 复制代码
```
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, Content-Type
```

举例：假设前端应用部署在http://localhost:8080，需要访问后端API服务在http://api.example.com上的接口。可以通过配置代理方式解决跨域问题。

在vue.config.js中配置代理：

html 复制代码

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

在Vue组件中发送请求：

html 复制代码

import axios from 'axios';

axios.get('/api/users').then(response => {
  // 处理响应数据
});

通过配置代理后，前端发送的/api/users请求会被代理服务器转发到http://api.example.com/users，成功实现跨域访问。