目录
一、为什么会发生跨域？
二、解决跨域的方法有什么？
1.JSONP（只适用于GET请求）
2.CORS（Cross-Origin Resource Sharing）
3.代理服务器
三、总结
一、为什么会发生跨域？
当在Vue应用中通过axios等工具发送HTTP请求时，如果请求的目标URL与当前页面的域名、协议、端口号不一致，就会触发浏览器的同源策略限制，导致跨域问题。
跨域问题是由浏览器引起的安全限制，而不是Vue框架本身导致的。Vue本身并不限制跨域访问，它只是一个前端框架，负责构建用户界面和处理数据逻辑。
解决跨域问题的方法包括代理服务器、JSONP和CORS
二、解决跨域的方法有什么？
1.JSONP（只适用于GET请求）
- 原理：利用script标签的src属性可以跨域加载资源的特性，通过动态创建script标签，并指定一个回调函数作为参数发送请求，在服务端返回数据时会将数据作为回调函数的参数传入，从而实现跨域获取数据。
代码如下（示例）：
// 在需要发送跨域请求的组件中引入jsonp库（如axios-jsonp）
import jsonp from 'axios-jsonp';
// 发送请求
this.$jsonp('http://api.example.com/data', {
params: {
// 请求参数
},
// 回调函数名，默认为'callback'
callbackParamName: 'callback',
}).then(response => {
// 处理响应数据
}).catch(error => {
// 处理错误
});2.CORS（Cross-Origin Resource Sharing）
- 原理：浏览器在发送跨域请求时会自动在请求头中添加Origin字段，如果服务端允许该请求的源（Origin）访问，服务端就会在响应头中添加Access-Control-Allow-Origin字段，浏览器收到响应后会检查该字段，如果允许，则将响应返回给前端。
代码如下（示例）：
在服务端设置响应头：在服务端设置响应头然后在Vue中发送跨域请求：
// Express框架示例，设置服务器响应头 app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); });发送跨域请求： this.$http.get('http://api.example.com/data', { // 请求参数 }).then(response => { // 处理响应数据 }).catch(error => { // 处理错误 });
3.代理服务器
- 原理：在Vue的配置文件中指定一个代理服务器，将前端的请求转发到该代理服务器，然后由代理服务器向目标服务器发送请求并获取响应数据，最后再将响应返回给前端。这样可以绕过浏览器的同源策略限制。
代码如下（示例）：
在Vue的配置文件（vue.config.js）中添加代理配置再在vue中发送请求
在vue的配置文件中添加代理配置 ： module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } };在vue中发送请求： 2345678module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } };
三、总结
-
JSONP（JSON with Padding）：JSONP是一种利用<script>标签没有跨域限制的特性来获取数据的方法。在使用JSONP时，前端会动态创建一个<script>标签，将请求发送到目标服务器上，并指定一个回调函数作为参数。目标服务器在返回数据时，将数据包装在回调函数中，以JavaScript代码的形式返回给前端。由于<script>标签没有同源策略限制，因此可以获取到返回的数据。
-
CORS（Cross-Origin Resource Sharing）：CORS是一种通过服务器设置HTTP头部信息来进行跨域请求的机制。在服务端设置响应头中的
Access-Control-Allow-Origin字段允许指定的源进行跨域请求。当浏览器发起跨域请求时，服务器响应中包含了合适的CORS头部信息，浏览器会根据这些头部信息来判断是否允许跨域请求。 -
代理服务器：代理服务器是在开发环境中配置的一个中间层服务器，用于转发请求，解决跨域问题。在Vue项目中，通过配置代理服务器将前端的请求发送到代理服务器上，代理服务器再将请求转发到后端接口。由于代理服务器与后端接口是同源的，所以不存在跨域问题。
区别：
- JSONP只适用于GET请求，而CORS和代理服务器方式可以支持各种类型的HTTP请求。
- JSONP需要目标服务器支持返回包装在回调函数中的数据，而CORS和代理服务器方式不需要对目标服务器做特殊要求。
- CORS方式需要后端对响应头进行设置，而代理服务器方式则需要开发者在开发环境中进行配置。
- 代理服务器方式可以将前端和后端的接口统一在同一个域名下，简化了前端代码的处理。
