浏览器跨域

同源策略

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求返回的数据接收，即请求发送了，服务器响应了，但是浏览器不接收。

同源：请求要满足协议，域名，端口都相同
http://www.test:8080/api 和 http://www.test:8080/test 同源

JSONP

同源策略针对的AJAX请求，对script，img标签没有该限制。JSONP基于此，让服务器返回一段js代码。该段代码是一个约定好的函数的执行，数据通过参数传递。

浏览器代码：

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
 
</body>
<script>
  function callback(data) {
    console.log(data)
  }
  function jsonp(url) {
    const script = document.createElement('script')
    script.src = url
    document.body.appendChild(script)
    script.addEventListener('load', () => {
      script.remove()
    })
  }
 
  const url = 'http://localhost:5008/getData'
  jsonp(url)
 
</script>
 
</html>

服务器代码

 const express = require('express')
 
const app = express()
const port = 5008
 
const router = express.Router()
router.get('/getData', (req, res) => {
  const data = {
    name: '小明',
    age: '18'
  }
  const script = `callback(${JSON.stringify(data)})`
  res.header('content-type', 'application/javascript').send(script)
})
 
app.use(router)
 
app.listen(port, () => {
  console.log(`server listen to ${port}`)
})

缺陷

会影响服务器的正常响应格式：JSONP要求服务器返回一段js代码，在非跨域时又是正常的JSON格式
只能使用GET请求：script是GET请求

CORS

浏览器代码：

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <script>
    const getCookie = 'http://localhost:5010/getCookie'
    const url = 'http://localhost:5010/getData'
    fetch(getCookie).then(() => {
      fetch(url, {
        method: 'get',
        headers: {
          a: 1
        },
        credentials: "include"
      })
    })
  </script>
</body>
 
</html>

服务器代码

 const express = require('express')
const cookieParser = require('cookie-parser')
const CORSModule = require('./cors')
const router = require('./router')
// const cors = require('cors')
 
const app = express()
const post = 5010
app.use(cookieParser)
// const allowOrigins = ['http://127.0.0.1:5500']
// app.use(cors({
//   origin: (origin, callback) => {
//     if (!allowOrigins.includes(origin)) {
//       callback(new Error('not allowed'))
//     }
//     callback(null, true)
//   },
//   methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
//   credentials: true
// }))
app.use(CORSModule)
app.use(router)
 
app.listen(post, () => {
  console.log(`server listen to ${post}`)
})

 const allowOrigins = ['http://127.0.0.1:5500']
 
module.exports = (req, res, next) => {
  const origin = req.headers.origin
  if (!origin || !allowOrigins.includes(origin)) {
    next()
    return
  }
 
  // 预检请求
  if (req.method === 'OPTIONS') {
    res.header('access-control-allow-methods', req.headers['access-control-request-method'])
    res.header('access-control-allow-headers', req.headers['access-control-request-headers'])
    // if (maxAge) res.header('access-control-max-age', maxAge)
  }
 
  // 附带身份凭证的请求
  res.header('access-control-allow-credentials', true)
 
  // 简单请求
  res.header('access-control-allow-origin', origin)
  next()
}

 const express = require('express')
 
const router = express.Router()
 
router.get('/getCookie', (req, res) => {
  const value = 123456
  res.cookie('token', value, {
    path: '/',
    domain: 'localhost',
    maxAge: 7 * 24 * 3600 * 1000, //毫秒数
  })
  res.header("authorization", value).send()
})
 
router.get('/getData', (req, res) => {
  console.log(222)
  const data = JSON.stringify({
    name: '小明'
  })
  res.send(data)
})
 
module.exports = router

补充

在跨域访问时，JS只能拿到一些最基本的响应头，如：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。Access-Control-Expose-Headers头让服务器把允许浏览器访问的头放入白名单，例如：

 Access-Control-Expose-Headers: authorization, a, b

posted @ 2024-05-24 01:49 冰凉小手阅读(15) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 浏览器缓存

· 浏览器存储（cookie，sessionStorage与localStorage的区别）

· 同源政策与跨域

· [网络] 跨域问题及解决方案

· 同源策略 & 跨域

阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架

历史上的今天：
2022-05-24 js防抖节流

公告

昵称：冰凉小手
园龄： 4年6个月
粉丝： 3
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

冰凉小手

浏览器跨域

同源策略

JSONP

缺陷

CORS

补充

公告

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>

	</body>
	<script>
	function callback(data) {
	console.log(data)
	}
	function jsonp(url) {
	const script = document.createElement('script')
	script.src = url
	document.body.appendChild(script)
	script.addEventListener('load', () => {
	script.remove()
	})
	}

	const url = 'http://localhost:5008/getData'
	jsonp(url)

	</script>

	</html>

	const express = require('express')

	const app = express()
	const port = 5008

	const router = express.Router()
	router.get('/getData', (req, res) => {
	const data = {
	name: '小明',
	age: '18'
	}
	const script = `callback(${JSON.stringify(data)})`
	res.header('content-type', 'application/javascript').send(script)
	})

	app.use(router)

	app.listen(port, () => {
	console.log(`server listen to ${port}`)
	})

	const express = require('express')
	const cookieParser = require('cookie-parser')
	const CORSModule = require('./cors')
	const router = require('./router')
	// const cors = require('cors')

	const app = express()
	const post = 5010
	app.use(cookieParser)
	// const allowOrigins = ['http://127.0.0.1:5500']
	// app.use(cors({
	// origin: (origin, callback) => {
	// if (!allowOrigins.includes(origin)) {
	// callback(new Error('not allowed'))
	// }
	// callback(null, true)
	// },
	// methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
	// credentials: true
	// }))
	app.use(CORSModule)
	app.use(router)

	app.listen(post, () => {
	console.log(`server listen to ${post}`)
	})

	const allowOrigins = ['http://127.0.0.1:5500']

	module.exports = (req, res, next) => {
	const origin = req.headers.origin
	if (!origin \|\| !allowOrigins.includes(origin)) {
	next()
	return
	}

	// 预检请求
	if (req.method === 'OPTIONS') {
	res.header('access-control-allow-methods', req.headers['access-control-request-method'])
	res.header('access-control-allow-headers', req.headers['access-control-request-headers'])
	// if (maxAge) res.header('access-control-max-age', maxAge)
	}

	// 附带身份凭证的请求
	res.header('access-control-allow-credentials', true)

	// 简单请求
	res.header('access-control-allow-origin', origin)
	next()
	}

	const express = require('express')

	const router = express.Router()

	router.get('/getCookie', (req, res) => {
	const value = 123456
	res.cookie('token', value, {
	path: '/',
	domain: 'localhost',
	maxAge: 7 * 24 * 3600 * 1000, //毫秒数
	})
	res.header("authorization", value).send()
	})

	router.get('/getData', (req, res) => {
	console.log(222)
	const data = JSON.stringify({
	name: '小明'
	})
	res.send(data)
	})

	module.exports = router