1. 首页首页
  2. 科技前沿科技前沿

2025年前端跨域问题读file（前端 跨域问题）

科技前沿 • • 阅读 33

前端跨域问题读file（前端 跨域问题）目录 跨域问题 举个栗子 Nginx 解决跨域问题 什么时候发送 OPTIONS 方法 预检请求 OPTIONS 方法 跨域问题经常发生在前后端分离开发模式中 指的是浏览器不允许非同源的请求调用 是浏览器出于安全考虑的一种策略 两个网址之间只要协议 域名 端口 子域名其中一个不同 就会被视为非同源 前端用 html js 代码做一个简单的接口调用 后端用 java 写几个简单的接口

大家好，我是讯享网，很高兴认识大家。



目录

  • 跨域问题
  • 举个栗子
  • Nginx解决跨域问题
  • 什么时候发送OPTIONS方法
  • 预检请求
  • OPTIONS方法

前端用html + js 代码做一个简单的接口调用

后端用java写几个简单的接口

nginx 配置 跨域 读取 oss pdf_nginx
讯享网

用这个配置文件启动nginx之后, 将html代码中的baseUrl改为 http://localhost/test 之后再次尝试调用接口.

nginx 配置 跨域 读取 oss pdf_跨域问题_02

接着讲nginx配置文件中注释部分代码取消注释, 重启nginx, 发现put跟delete类型的方法也可以正常调用

nginx 配置 跨域 读取 oss pdf_Access_03

预检请求

HTTP请求可以分为简单HTTP请求和需预检HTTP请求(复杂HTTP请求).
满足以下条件的可以视为简单HTTP请求:
使用的方法为GET, POST, HEAD之一且Content-Type的值仅为下列之一:test-plain, multipart/form-data, application/x-www-form-urlencoded
其余的全视为需预检HTTP请求.







OPTIONS方法

nginx 配置 跨域 读取 oss pdf_nginx_04

其中Type为preflight类型的请求中, 调用的方法类型即为OPTIONS

nginx 配置 跨域 读取 oss pdf_跨域问题_05

查看这个请求的具体返回值我们可以发现response的头部中有Access-Control-Allow-Origin和Access-Control-Allow-Methods两个字段,他们的值就是我们在Nginx配置文件中设置的值

上边这段代码的意思就是当请求方法类型为OPTIONS时,将允许的来源和方法设置进response头部中,并且将状态码设置为204(成功且不刷新页面).

nginx 配置 跨域 读取 oss pdf_ajax跨域问题_06

但是这里有个疑惑就是为什么需要针对OPTIONS类型的方法去做特殊处理,不是所有的请求都会经过nginx并且将Access-Control-Allow-Origin和Access-Control-Allow-Methods两个字段设置好吗.希望有懂的大佬可以留言解惑下.

至此用Nginx解决跨域问题的介绍完毕, 如果有什么错误的地方希望各位指出, 谢谢!

小讯
上一篇 2025-05-12 12:49
下一篇 2025-04-29 16:56

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/170196.html