跨域的几种解决方案（详细）

最新推荐文章于 2025-06-13 16:13:48 发布

原创最新推荐文章于 2025-06-13 16:13:48 发布 · 4.2k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #http #java

面试题专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了前端开发中遇到的跨域问题及其解决方案，包括JSONP、CORS和使用Proxy代理转发的三种常见方法。通过实例演示了如何在前端和后端实现JSONP，以及后端设置CORS头来允许跨域请求。此外，还讲解了在VueCLI等开发环境中，如何配置Proxy代理以避免跨域限制，确保前端正常发送Ajax请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跨域的几种解决方案

1.什么是跨域

.网页所在url的协议、域名、端口号，和Ajax请求url的协议、域名、端口号有一个对应不上，就发生跨域
.跨域是浏览器对ajax做出的限制

2.演示用axios请求网易新闻地址，发现跨域出错

http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html

3.解决跨域方式

3.1 jsonp方式

.需要前端和后端同时支持
前端

  <script>
  //为后端返回的函数做准备，否则会报错显示abc is not a function
 function abc(res){
      console.log(res)
    }
  </script>
  //利用html标签的src属性不受跨域限制，从而进行跨域访问
  <script src="http://localhost:3000/api/jsonp"></script>

后端

const express=require('express')
const app=express()
//测试jsonp请求接口
app.get('/api/jsonp',(req,res)=>{
//发送的内容会被解析为js代码，其中abc就是函数（传参传的是对象）
//前端需要准备abc函数以及形参。
 res.send('abc({status:0,message:"登录成功"})')
})
app.listen(3000,()=>console.log('启动了'))

前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据
后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行
调用函数名, 并传递数据

具体实现

<script>
  function callBackFn(data){
    // data就是'{"a": 10, "b": 20}'
  }
</script>
<script src="http://后台接口地址?callback=callBackFn"></script>
<!-- 后台接口返回 'callBackFn({"a": 10, "b": 20})' -->

3.2 cors方式

.前端什么也不用做
.后端需要开启cors

前端

let xhr=new XMLHttpRequest()
xhr.onload=function(){
 console.log(xhr.responseText)
}
xhr.open('get','http://localhost:3000/api/test')
xhr.send()

后端
index.js

const express=require('express')
const app=express()
//测试接口
app.get('/api/test',(req,res)=>{
 //指示允许哪些源发送请求，*表示所有
 res.setHeader('Access-Control-Allow-Origin','*')
 res.send('hello word')
})
app.listen(3000,()=>console.log('启动了'))

实际上就是在响应头添加允许跨域的源
Access-Control-Allow-Origin: 字段和值(意思就是允许去哪些源地址去请求这个服务器)如 get 、post 、put 、delete…
CORS才是解决跨域的真正解决方案。
前端需要做什么？
无需做任何事情，正常发送Ajax请求即可。
后端需要做什么？
需要加响应头。或者使用第三方模块 cors 。

3.3 proxy代理转发

.如果后端jsonp也不弄，cors也不弄，就给个接口地址

我们可以在本地弄个服务器, 然后用服务器请求后台服务器接口地址

在这里插入图片描述
.但是vuecli脚手架, 启动了一个webpack开发服务器, 它就能做代理转发（后端和后端不存在跨域问题）
.而且前端和这个服务器是同源的都是8080端口
.需要修改webpack开发服务器的配置即可

更多配置项参考这里:https://webpack.docschina.org/configuration/dev-server/#devserverproxy

devServer: {
    proxy: {
      // http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html
      '/api': { // 请求相对路径以/api开头的, 才会走这里的配置
        target: 'http://c.m.163.com', // 后台接口域名
        changeOrigin: true, // 改变请求来源(欺骗后台你的请求是从http://c.m.163.com)
        pathRewrite: {
          '^/api': '' // 因为真实路径中并没有/api这段, 所以要去掉这段才能拼接正确地址转发请求
        }
      }
    }
  }

.axios请求的代码

axios({
    url: '/api/nc/article/headline/T1348647853363/0-40.html'
})