解决前端跨域演示的简单例子（CORS、jsonp）

Amodoro

已于 2023-03-31 22:06:48 修改

阅读量85

点赞数

分类专栏：笔记文章标签： javascript

于 2023-02-02 16:43:36 首次发布

本文链接：https://blog.csdn.net/qq_40230735/article/details/128853025

版权

笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

本文介绍了在Express4.18.2版本中处理跨域问题的方法，通过设置`Access-Control-Allow-Origin`来允许所有来源访问。同时，文章也展示了JSONP的实现方式，服务器返回前端定义好的函数来处理数据。

摘要由CSDN通过智能技术生成

服务器使用express版本4.18.2（没什么特别意思，防止版本更新express的api变更导致代码报错）

npm init -y
npm i express@4.18.2 save

CORS

服务器代码

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

// 这里解决跨域问题，设置回应报文请求头Access-Control-Allow-Origin
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  next();
})

app.get('/', (req, res) => {
  res.send(`success`)
})

app.listen(port, () => {
  console.log(`Example app listening on port http://127.0.0.1:3000`)
})

前端页面代码

<script>
	fetch('http://localhost:3000/').then(response => {
    console.log(response)
  })
</script>

jsonp

服务器代码

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

app.get('/', (req, res) => {
  // 返回给前端后直接调用前端定义好的函数了
  res.send(`${req.query.callback}(88)`)
})

app.listen(port, () => {
  console.log(`Example app listening on port http://127.0.0.1:3000`)
})

前端代码

<!--必须先定义回调函数，放在请求前面-->
<script>
  function f (res) {
    console.log(res)
  }
</script>
<!--请求返回后自动调用函数执行-->
<script src="http://127.0.0.1:3000/?callback=f"></script>