跨域是指在浏览器端，当一个 Web 应用程序（例如 Vue.js）试图通过 AJAX 请求获取来自不同域的资源时，浏览器会阻止这样的请求，这是为了保护用户隐私和安全。浏览器遵循同源策略（Same-Origin Policy），该策略要求网页只能访问与其所在域相同的资源，而不能直接访问其他域的资源。
而如下图就是跨域问题报的错误
Vue.js 在解决跨域问题有几种常见的方法：
- 代理方式：这是一种在开发环境中常用的解决跨域问题的方法。通过在后端服务器上设置代理，将前端应用程序发送的请求转发到后端服务器，然后将响应返回给前端应用程序。这种方式不会受到浏览器的跨域限制，因为浏览器认为请求是发给同源的后端服务器的。
Vue CLI 支持在开发环境中配置代理，通过将 API 请求转发到后端服务器来解决跨域问题。你可以在 vue.config.js 文件中添加以下配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com', // 设置你的后端接口地址
changeOrigin: true,
pathRewrite: {
'^/api': '' // 如果你的 API 地址有一个统一的前缀，可以将其去除
}
}
}
}
}
在上面的示例中，所有以 /api 开头的请求都会被代理到 http://api.example.com，这样就能够绕过跨域限制了。
- JSONP（仅限 GET 请求）：JSONP（JSON with Padding）是一种通过动态添加
<script>标签来实现的跨域请求方法。它利用了浏览器对于<script>标签不受同源策略限制的特性。在跨域请求中，服务器返回的不是 JSON 数据，而是一段特殊格式的 JavaScript 代码，该代码会在前端应用程序中执行，并且通过回调函数的方式将数据传递给前端应用程序。
如果你需要使用 JSONP 获取数据，可以利用 Vue.js 提供的 jsonp 方法。在你的 Vue 组件中，可以这样使用：
import { jsonp } from 'vue-jsonp'
export default {
methods: {
fetchData() {
jsonp('http://api.example.com/data', { param: 'callback' }).then(response => {
// 处理响应数据
}).catch(error => {
// 处理错误
})
}
}
}
这样，通过 JSONP 发送的 GET 请求就可以跨域获取数据了。
- CORS（跨域资源共享）：CORS 是一种在后端服务器中设置响应头部信息的方法，用于告诉浏览器哪些跨域请求是被允许的。通过在响应头中设置合适的 CORS 头部信息，服务器可以告诉浏览器允许来自其他域的前端应用程序访问资源。常见的 CORS 头部信息包括
Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等。
如果你有权限控制后端服务器，可以在响应头中设置 CORS 相关的头部信息来解决跨域问题。在后端的响应中添加以下头部信息:
Access-Control-Allow-Origin: * // 允许所有域名访问，也可以指定具体的域名
Access-Control-Allow-Methods: GET, POST, PUT, DELETE // 允许的请求方法
Access-Control-Allow-Headers: Content-Type // 允许的请求头
通过设置这些头部信息，前端就可以在跨域请求中获取到服务器的响应了。
在以上这些方法中，代理方式是在开发环境中使用最方便的，因为它不需要对后端进行特殊配置。而 JSONP 和 CORS 则适用于生产环境中的跨域处理。不同的情况下选择不同的方法，以满足你的需求。
