跨域和cors

什么是跨域请求呢

  • 域名(www.baidu.com 和 www.bilibili.com)
  • 端口号 (80 和 443)
  • 协议 (http 和 https)

当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

解决跨域请求有哪些方法呢

  • 修改浏览器的安全设置
  • jsonp(几年前很火的方法)
  • cors跨域资源共享(cross origin resource sharing)
  • iframe
  • 反向代理

这里主要讲cors

跨域资源共享( CORS )

跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中(例如 XMLHttpRequest或 Fetch )使用 CORS,以降低跨域 HTTP 请求所带来的风险。
跨域资源共享标准( cross-origin sharing standard )允许哪些跨域 HTTP 请求:

  • XMLHttpRequest (ajax、axios)或 Fetch 发起的跨域 HTTP 请求。
  • Web 字体 (CSS 中通过 @font-face 使用跨域字体资源)
  • cors跨域资源共享(cross origin resource sharing)
  • WebGL 贴图
  • 使用 drawImage 将 Images/video 画面绘制到 canvas

跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
概括下来就是两点

  • 新增了一组和跨域有关的http首部字段
  • 跨域请求前需要先用options方法预检一下

在这里插入图片描述

### 前端资源共享(CORS)问题及其解决方案 #### 什么是? 当浏览器尝试加载来自不同名、协议或端口的资源时,就会触发问题。这种行为受到同源策略(Same-Origin Policy)的约束[^1]。 #### 资源共享(CORSCORS 是一种基于 HTTP 协议的标准机制,允许服务器明确指定哪些外部来源可以访问其资源。它通过一系列特定的 HTTP 请求头来控制客户端与服务端之间的交互[^2]。 #### 如何在前端处理 CORS 配置? ##### 1. 使用简单请求 对于简单的 GET 或 POST 请求,只要满足以下条件之一即可正常运行: - 不包含自定义头部字段; - 数据格式为 `text/plain`、`application/x-www-form-urlencoded` 或者 `multipart/form-data`。 在这种情况下,浏览器不会发送预检请求(preflight request),而是直接发起实际请求[^3]。 ```javascript fetch('https://example.com/api/data', { method: 'GET', }) .then(response => response.json()) .catch(error => console.error('Error:', error)); ``` ##### 2. 处理复杂请求 (Preflight Requests) 如果请求不符合上述简单请求的要求,则会先发出一次 OPTIONS 方法的预检请求给目标 URL 来确认是否有权限执行真正的操作前的操作。此时需要注意的是,在服务端需设置好响应这些预检请求的相关参数^。 例如,启用所有方法任意来源的支持: ```http Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization Access-Control-Allow-Origin: * ``` ##### 3. JSONP 实现方式 尽管 JSONP 只能用于 GET 类型的数据获取场景,并且存在安全隐患等问题,但在某些不支持现代 API 的老旧系统上仍然可能被采用作为替代方案. 注意:由于 JSONP 并不属于正式标准的一部分,因此并不推荐广泛应用于新项目当中。 ##### 4. 利用 Express 设置反向代理 另一种有效的方法是在自己的后端搭建一个中间层来进行数据转发从而规避掉直接面对第三方接口带来的限制情况。比如利用 Node.js 中非常流行的框架 express 创建这样的路由逻辑: ```javascript const express = require('express'); const app = express(); app.use('/api', function(req, res){ const proxyReq = https.request({ hostname: 'thirdparty.example.com', path: '/real-api-endpoint' + req.url, headers: {...req.headers} }, function(proxyRes){ Object.keys(proxyRes.headers).forEach(key=>res.setHeader(key,proxyRes.headers[key])); proxyRes.pipe(res); }); req.pipe(proxyReq); }); // Start server on port 8080 app.listen(8080); ``` 以上就是几种主要针对前端开发人员遇到的难题所提供的解答思路技术手段介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值