Vue.js本身并不直接解决跨域问题，而是依赖于浏览器的同源策略。但是，Vue提供了一些方法来帮助我们解决跨域问题。
原理：
- 浏览器的同源策略规定，不同源（协议、域名、端口）之间的网络请求受到限制，无法直接进行跨域访问。
- Vue通过使用代理、JSONP、CORS（跨来源资源共享）等方式，绕过浏览器的同源策略，实现跨域请求。
方法：
- 代理方式：
- 在开发环境中，可以配置一个代理服务器，将前端请求发送到同域下的服务器上，再由代理服务器转发请求到目标服务器，从而实现跨域。
例如，使用vue.config.js文件配置代理：
module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } };
- 然后，在Vue组件中发送请求时，使用相对路径
/api代替完整的URL。
- JSONP方式：
- JSONP利用了<script>标签的src属性可以跨域的特性，通过动态创建<script>标签来加载远程脚本，并将数据作为回调函数的参数返回。
- 例如，使用Vue的axios库实现JSONP请求：
import axios from 'axios'; axios.jsonp('http://example.com/api', { params: { callback: 'jsonpCallback' } }).then(response => { // 处理响应数据 });
CORS方式：
- 如果目标服务器允许跨域请求，可以在服务器端设置合适的CORS响应头，允许特定的源进行跨域访问。
例如，在服务器端的响应中添加以下响应头：
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中配置代理：
module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } };
在Vue组件中发送请求：
import axios from 'axios'; axios.get('/api/users').then(response => { // 处理响应数据 });
通过配置代理后，前端发送的/api/users请求会被代理服务器转发到http://api.example.com/users，成功实现跨域访问。
