跨域的发生时机？

最新推荐文章于 2024-05-12 16:58:22 发布

原创最新推荐文章于 2024-05-12 16:58:22 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文探讨了跨域问题的发生时机，并通过代码实例验证了浏览器在接收到后端响应时才会触发跨域限制。文章提供了使用Node.js创建的简单接口和前端Fetch请求的示例，证明了跨域报错实际发生在浏览器解析响应阶段。

前言

关于什么是跨域，跨域的解决办法可以查看下面这篇文章。

跨域解决办法以及JSONP代码

一、跨域的发生时机？

1、请求一发出就被浏览器的跨域报错拦截下来
2、请求发出到后端，后端返回数据，在浏览器接收后端数据时被浏览器的跨域报错拦截下来

关于上面两个答案，相信大部分小伙伴都认为是第一种，下面我们来进行检验。

二、代码检验

1.使用node实现一个简单的接口(没有使用中间件处理跨域)

const express = require('express')
const app = express()

app.get('/api/test',(req,res)=>{
    console.log('害怕!!!前端过来了');
    res.send()
})
app.listen(9000,_=>{
    console.log("Server is running")
})

2.前端页面(使用fetch请求上面的接口)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
  fetch('http://localhost:9000/api/test').then(res=>{
    console.log(res)
  })
</script>
</body>
</html>