前端-跨域

跨域

同源策略

若页面的源和页面运行过程中加载的源不一致时,出于安全考虑,浏览器会对跨域的资源访问进行一些限制

  • 源=协议+主机+端口,两个源相同,称之为同源,两个源不同,称之为跨源或跨域
解决办法:代理、JSONP、CORS
代理
  • 适用场景:生产环境不发生跨域,但开发环境发生跨域
  • 处理:配置devServer-proxy或者nginx ==>了解webpack的文档
    module.exports = {
     	devServer: {
    		proxy: { // 配置代理
      			"/api": { // 若请求路径以 /api 开头
        		target: "http://dev.taobao.com", // 将其转发到 http://dev.taobao.com
      			}
      		}
      	}
    }
    
    location / {
    	proxy_pass http://localhost:3001/; // 当前运行工程
    }
    location /api/ {
    	proxy_pass http://dev.taobao.com/; // 请求地址
    }
    
JSONP
  • 只支持GET请求,需要前后端配合
  • 原理:当需要跨域请求时,不使用AJAX,转而生成一个script元素去请求服务器,由于浏览器并不阻止script元素的请求,这样请求可以到达服务器。服务器拿到请求后,响应一段JS代码,这段代码实际上是一个函数调用,调用的是前端预先生成好的函数,并把浏览器需要的数据作为参数传递到函数中,从而间接的把数据传递给前端
// 服务端
app.get(
	"/test",
	(req, res)=>{   
		var callbackName = req.query.callback;
		var func = callbackName + 'hello!'
		res.send(func)
	}
)
// 前端
<script>
	test(data) {
	// 打印内容:data:hello!
	console.log('data:', data)
	}
</script>
 <script src="http://dev.taobao.com?callback=test"></script>
CORS-跨域资源共享
  • 思路:如果浏览器要跨域访问服务器的资源,需要获得服务器的允许
  • 三种交互模式:简单请求、需要预检的请求、附带身份凭证的请求
  • 简单请求
    • 满足下面三种情况
    • GETPOSTHEAD请求
    • 请求头仅包含安全的字段,如AcceptAccept-LanguageContent-LanguageContent-TypeDPRWidth
      - 如果请求头包含Content-Type,仅限text/plainmultipart/form-dataapplication/x-www-form-urlencoded
  • 当浏览器判定请求是简单请求时
    • 请求头中会自动添加Origin字段
    • 服务器响应头中应包含Access-Control-Allow-Origin,设置为*或者具体的源(推荐)需要服务端配合
  • 需要预检的请求
    • 有以下三种特征
      • 请求方法为OPTIONS
      • 没有请求体
      • 请求头中包含Origin(请求的源)、Access-Control-Request-Method(后续的真实请求的请求方法)、Access-Control-Request-Headers(后续的真实请求的请求头)
    • 流程
      • 浏览器发送预检请求,询问服务器是否允许,包含了后续真实请求要做的事情
      • 服务器允许,响应头需要添加以下内容,需要服务端配合
        • Access-Control-Allow-Origin:和简单请求一样,表示允许的源
        • Access-Control-Allow-Methods:表示允许的后续真实的请求方法
        • Access-Control-Allow-Headers:表示允许改动的请求头
        • Access-Control-Max-Age:告诉浏览器,多少秒内,对于同样的请求源、方法、头,都不需要再发送预检请求了
      • 浏览器发送真实请求
      • 服务器响应真实请求
  • 附带身份凭证的请求
    • 会在请求头中添加cookie
    • 服务端需要在响应头中添加Access-Control-Allow-Credentials: true,需要服务端配合
      • 另外需要注意,对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin: *
  • 补充
    - 在跨域访问时,JS 只能拿到一些最基本的响应头,如果要访问其他头,需要让服务端设置响应头Access-Control-Expose-Headers,把允许浏览器访问的头放入白名单

参考文章:https://www.jb51.net/article/254822.htm

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端的@font-face在跨域问题上会遇到一些挑战。当字体文件存放在不同的域名或端口上时,浏览器会默认遵循同源策略,即只有相同域名、端口和协议的资源才可以被加载和使用。这就导致了在使用@font-face时,字体文件的跨域请求会被浏览器阻止。 为了解决这个问题,可以使用nginx反向代理实现跨域请求。通过在nginx配置中添加反向代理规则,将字体文件的请求转发到指定的服务器上,从而实现字体文件的跨域加载。这样,在前端代码中使用@font-face时,即使字体文件存放在不同的域名或端口上,也可以正常加载和使用字体效果。 同时需要注意的是,使用@font-face会增加用户流量消耗,并且在首次加载字体文件时可能会导致页面打开延迟。这是因为浏览器需要下载字体文件才能显示字体效果。但是,@font-face的好处是即使系统没有安装该字体,我们仍然可以使用它来呈现特定的字体效果。 如果你对前端的@font-face跨域问题具体的配置和实现细节感兴趣,可以参考一些相关的网址,如W3CPlus、Stack Overflow、Dynamic Drive等。它们提供了一些关于@font-face跨域问题的解决方案和实践经验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [解决在CSS中使用@font-face指定Web字体时,链接远程字体文件失败](https://blog.csdn.net/weixin_45400833/article/details/124338545)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [CSS3魔法堂:认识@font-face和Font Icon](https://blog.csdn.net/weixin_33722405/article/details/90150329)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值