最全前端设置跨域方法

本文介绍了前端跨域的基本概念和同源策略的重要性。主要讨论了两种流行的跨域方法:CORS(跨域资源共享)和代理。CORS需要在服务器端设置响应头以允许跨域请求,可以通过框架插件或自定义插件实现。代理则是通过在开发服务器配置代理,例如使用webpack-dev-server或express与http-proxy-middleware,来避免浏览器的同源策略限制,实现跨域访问。
摘要由CSDN通过智能技术生成

首先想实现跨域先弄懂什么是跨域
所谓的跨域是建立在浏览器同源策越下对异源资源进行请求的行为

同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。

目前抛开只能跨域get请求的jsonp之外流行的两种跨域方式分别是
1 cors

CORS (Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

也就是服务器运行进行跨域请求,因为要在服务端加上cors标识一般用于服务端进行跨域操作

2 代理
因为脚本不能请求异源资源,那么将脚本和资源服务器处于同一源即可。

cors相关方法

同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限,即服务器可以选择,允许跨域请求访问到它们的资源。

所以既然是服务器选择开发资源即可访问。所以根本原理便是在服务器的response上 加上表示可以访问资源的标识即可。

1 框架插件配置法
比如各大node框架一般都自带跨域插件,如egg-cors,koa-cors之类的

当然也可以自己写插件进行response拦截。

'use strict';
module.exports = () => {
   
  return async (ctx, next) => {
   
    // 处理OPTIONS请求
    if (ctx.method === 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值