首页 > 其他分享 >关于前后端分离 跨域的问题之出现两次请求的问题(preflight预检)

关于前后端分离 跨域的问题之出现两次请求的问题(preflight预检)

时间:2022-11-18 01:55:08浏览次数:43  
标签:Control origin allowOrigin 跨域 预检 Access preflight 请求

由于浏览器的同源保护需要,第一次请求( 请求类型options)到服务器去验证 到不到响应就无法通过验证

所以需要对客户做一个正常响应(意思就是输出给浏览器,就是空内容)

第二次才是真正的请求

列子:

$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
        $allowOrigin = Conf::get('app.cross_domain');
        if (!empty($origin) && !empty($allowOrigin)) {
            if (in_array($origin, $allowOrigin)) {
                $origin = $allowOrigin == "*" ? $allowOrigin : $origin;
                header('Access-Control-Allow-Origin: ' . $origin);
                header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
                header("Access-Control-Allow-Credentials: true");//支持cookie跨域
                header("Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With");
                header('Access-Control-Max-Age: 1800');
                //判断是否是Options请求
                if ($request->isOptions()) {
                    return http_response_code(200);
                }
            }

        }

 一般 设置这个'Access-Control-Max-Age: 1800') 就能控制预检请求缓存在规定时间后才再次发起preflight预检请求(options)   1800表示隔30分钟才发起预检请求

标签:Control,origin,allowOrigin,跨域,预检,Access,preflight,请求
From: https://www.cnblogs.com/yangshiyi/p/16901953.html

相关文章

  • 前后端分离解决跨域问题
    跨域操作过程:1.浏览器在发起请求之前,获取请求路径中协议、ip、端口,判断当前这3个数据跟当前服务器是否一致,一旦发现不一致,那么会马上执行跨域访问操作2.浏览器马上发起......
  • vue跨域2.x,3.x跨域,nginx跨域,nginx+域名+ssl证书配置
    vue跨域2.x文件位置config---》index.js---》大约13行---》跨域内容proxyTable:{'/api':{target:'http://192.168.0.125:8000/info',//跨域地址changeOrigin:t......
  • Vue3解决前端跨域问题
    在vue.config.js里添加代理备注:例如vue想请求不在同一台服务器上的localhost:8080服务器的接口,在下面proxy里的target里写上要访问的服务器的前缀,然后写一个别名'/project......
  • Vue跨域解决方案
    跨域:什么是跨域?跨大家肯定都知道,从一边到另一边那么域是什么?通俗的说,域就是url、浏览器的请求地址的最开始的一部分......
  • CROS 跨域请求原理
    cros分为两种请求简单请求浏览器将CORS请求分成两类:简单请求(simplerequest)和非简单请求(预检请求)(not-so-simplerequest)。只要同时满足以下两大条件,就属于简单请求。(1)请......
  • fiddler 实现跨域
    staticfunctionOnBeforeResponse(oSession:Session){...if(oSession.uriContains("要处理的url")){oSession.oResponse["Access-Con......
  • jquery-一行代码解决跨域问题 | 仅限get请求
    问题平时我们在开发时遇到的跨域问题,后台暂不给解决时,我们一般可以用vue代理(node)、nginx反向代理等方式来解决但是当项目要上线的时候,这些问题将又会出现就比如,自制的......
  • springboot 跨域处理无效
    1.在根据网上的说明使用:@CrossOrigin和WebMvcConfigurer配置无效后发现了下面这篇文章springboot跨域处理无效填坑篇:https://blog.csdn.net/huhui806/article/details......
  • 11. 跨域怎么解决
    首先,跨域分为开发环境和生产环境的跨域,我们在开发环境可以使用proxy代理给target设置请求接口地址,以前使用的是jsonp跨域;生产环境使用Nginx反向代理; 延申问......
  • vue框架跨域请求之axios
    1、打开hbuilderx,【文件】==》【新建】==》【项目】,创建vue项目。   2、创建后的vue项目结构如下所示,打开【package.json】配置文件,添加axios相关依赖。   ......