Ajax学习：设置CROS响应头实现跨域（跨域资源共享）

最新推荐文章于 2024-05-26 22:33:39 发布

¡Venceremo

最新推荐文章于 2024-05-26 22:33:39 发布

阅读量1.7k

点赞数 1

分类专栏： Ajax 文章标签： ajax 学习前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/128154917

版权

Ajax 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

CROS:跨域资源共享、是官方的跨域解决方案，特点不需要在客户端做任何特殊的操作，完全在服务器中处理（支持get post 等）

客户端做ajax请求，服务端做相应头设置就可以实现跨域：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			#result {
				width: 200px;
				height: 100px;
				border: 1px slateblue solid;
			}
		</style>
	</head>
	<body>
		<button>发送请求</button>
		<div id="result"></div>
		<script>
			const btn =document.querySelector('button');
			const result=document.querySelector('div')
			btn.addEventListener('click', function() {
			
				//4步骤走
				const xhr = new XMLHttpRequest();
				xhr.open('GET', 'http://127.0.0.1:9000/cors-server');
				xhr.send();
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4) {
						if (xhr.status < 300 && xhr.status >= 200) {
							console.log(xhr.response)
						}
					}
				}
			})
		</script>
	</body>
</html>

const {
	json
} = require('express');
const express = require('express')

const app = express();


app.all('/cors-server',function(requset,response){
	response.send('CORS 跨域请求')
})

app.listen(9000, () => {
	console.log('9000启动成功')
})

Access to XMLHttpRequest at 'http://127.0.0.1:9000/cors-server' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

被CORS 跨域共享机制阻止服务端没有Access-Control-Allow-Origin响应头

要想实现跨域请求，必须在服务端返回结果的时候设置响应头

file协议向http 发送请求 Access-Control-Allow-Origin 后面填写运行网页的url *是通配所有网页

http和http不需要

实际上有一组响应头

跨源资源共享（CORS） - HTTP | MDN (mozilla.org)

Access-Control-Allow-Origin 参数指定了单一的源（什么客户端的url可以访问该资源），

Access-Control-Expose-Headers：暴露头部信息，客户端同意的哪些头可以暴露

Access-Control-Max-Age：预请求结果缓存。加一个时间，每次请求就会在规定时间有效，超过使时间不会预检

Access-Control-Allow-Credentials: 跨域请求时候，是否允许携带验证信息（cookie）

Access-Control-Allow-Methods：设置请求允许的方法

Access-Control-Allow-Headers：设置头信息（自定义头不允许所以需要在响应前接收的任意请求头）

app.all('/cors-server', function(requset, response) {
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*'); //头，方法
	response.setHeader('Access-Control-Allow-Methods', '*')
	response.send('CORS 跨域请求')
})

¡Venceremo

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习：设置CROS响应头实现跨域（跨域资源共享）

Access-Control-Max-Age：预请求结果缓存。Access-Control-Allow-Headers：设置头信息（自定义头不允许所以需要在响应前接收的任意请求头）Access-Control-Allow-Credentials: 跨域请求时候，是否允许携带验证信息（cookie）Access-Control-Expose-Headers：暴露头部信息，客户端同意的哪些头可以暴露。Access-Control-Allow-Methods：设置请求允许的方法。http和http不需要。
复制链接

扫一扫