什么是JS的同源策略和跨域问题?

1)什么是同源策略
当两个页面的协议,域名和端口都相同的时候,我们称这两个页面是同源
同源策略(英文全称Same origin policy):是浏览器提供的一个安全功能,它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
简而言之就是浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互。
2)什么是跨域
跨域指的是两个URL的协议,域名,端口只要其中一个不一致,就会形成跨域
出现跨域的根本原因浏览器的同源策略不允许非同源的URL之间进行资源的交互
如何解决跨域问题?
我们有两种解决方法:
。用jsonp解决
。用CROS解决
1)JSONP方法的使用
什么是JSONP?
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题
JSONP的缺点:只能进行GET请求不能进行POST请求
在jQuery中使用JSONP

$.ajax({
	 url: 'http://ajax.xxx.net:3006/api/jsonp?name=zs&age=20', 
	 // 如果要使用 $.ajax() 发起 JSONP 请求,必须指定 datatype 为 
	 jsonp dataType: 'jsonp', 
	 // 发送到服务端的参数名称,默认值为 callback 
	 jsonp: 'callback', 
	 // 自定义的回调函数名称,默认值为 jQueryxxx 格式 
	 jsonpCallback: 'abc',
	  success: function(res) {
	   console.log(res) 
	 } 
})

2)CORS的使用方法
什么是CORS?
CORS(跨域资源共享)由由一系列HTTP响应头组成,这些HTTP响应头决定浏览器,是否阻止前端js代码
跨域获取资源
浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了CORS相关的HTTP响应头,就可以解除浏览器前端的跨域访问限制
CORS的注意事项:
。CORS主要在服务器端进行配置
。CORS在浏览器中有兼容性,只有支持XMLHttpRequest Level2的浏览器,才能正常访问开启了CORS的服务端接口(例如:IE10+Cheome4+ FireFox3.5+)
CORS的响应头分三种
(1)Access-Control-Allow-Origin:
origin 参数的值指定了允许访问该资源的外域URL。例如:
在这里插入图片描述
假如URL值为*,表示允许来在任何域的请求。
2)Access-Control-Allow-Headers**:
a默认情况下,CORS仅支持客户端向服务器发送如下的9个请求头:
。Accept
。Accept-Language
。Content-Language
。DPR
。Downlink
。Save-Data
。Viewport-Width
。Width
。Content-Type (值仅限于 text/plain、multipart/form-data、application/x-www-formurlencoded 三者之一)
b如果客户端向服务器发送了额外的请求头信息,则需要在服务器端,通过 Access-Control-AllowHeaders 对额外的请求头进行声明,否则这次请求会失败!
在这里插入图片描述
3、Access-Control-Allow-Methods
a、默认情况下,CORS 仅支持客户端发起 GET、POST、HEAD 请求。
b、如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源,则需要在服务器端,通过 AccessControl-Alow-Methods 来指明实际请求所允许使用的 HTTP 方法
在这里插入图片描述
CORS的使用方法

//1.导入模块 
const express = require('express');
 //2.创建服务器 
 let app = express(); 
 //导入cors模板 
 const cors=require('cors'); 
 app.use(cors()) 
 //导入路由模块 
 const router=require('./接口router');
  //解析url-encoded数据 
  app.use(express.urlencoded({extended:false})) 
  //开启全局路由 
  app.use('/api',router)
  //3.开启服务器 
  app.listen(8082,()=>{
   console.log('success');
 });
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值