30分钟搞懂什么是跨域,如何解决跨域?_跨域是什么意思-CSDN博客

本文链接：https://blog.csdn.net/suandfei/article/details/102829398

本文详细介绍了跨域的概念，同源策略及其限制，并列举了跨域的几种类型。针对跨域问题，文章提出了解决方案，包括Node.js中使用CORS中间件和JSONP技术。通过示例代码解析了JSONP的工作原理，展示了如何利用jQuery的dataType：“jsonp”实现跨域请求。

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

跨域:

一个域名下的网站向另一个域名下的网站请求资源(静态文件)

比如: 引用别的网站的css link 标签引入别的网站的js 文件,但是浏览器有同源策略.有的人会问? 同源策略是啥?

同源策略:

所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

浏览器规定ajax请求只能使用来自于自己网站的数据，不允许使用自己网站以外的数据。
(1). 浏览器允许ajax向其它网站发送请求
(2). 浏览器也允许ajax接收其它网站的响应
(3). 但是浏览器会检查响应数据的来源(origin)：
a. 如果数据来源的服务器地址和当前网页所在的地址相同，才能使用数据
b. 如果数据来源的服务器地址和当前网页所在的地址不同，就不允许使用数据 -----同源策略 (cross orgin resoures shareing)

跨域的几种类型:

下面这些情况都属于跨域,请牢记.

(1). http://www.a.com  ->  http://www.b.com  **域名不同**
(2). http://oa.tedu.com  ->  http://hr.tedu.com **子域名不同**
(3). http://localhost:3000 -> http://localhost:8080  **端口号不同**
(4). http://12306.cn    ->  https://12306.cn    **协议不同**

特别提示: 如果你是在一台电脑上进行跨域测试的话 localhost 和127.0.0.1 这就可以实现跨域操作了.

跨域怎么解决?

1.如果你的后端是node.js 开发的话 安装expres中间件cors
(1). 项目本地安装cors模块: npm i -save cors
(2)

app.use(cors({
   
  			origin:['http://localhost:8080', "http://127.0.0.1:5500"],
  			credentials:true
		}))

2.服务端CORS跨域: 让服务器端在返回数据前，修改响应头中的来源

地址与前端服务器地址一样。
服务端接口返回数据时，不要用res.send(result) 因为 res.send()里面封装好了浏览器的源头.
应该:

  res.writeHead(200,{
   
  		"Access-Control-Allow-Origin":"http://127.0.0.1:5500" //和前端项目所在服务器的地址保持一致
		});
		res