zoukankan      html  css  js  c++  java
  • 解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案

    在前后端分离的项目中,前端和后端可能是在不同的服务器上,也可以是Docker上,那就意味着前端请求后端Restful接口时,存在跨域情况。

    后端在做了通用的跨域资源共享CORS设置后,前端在做ajax跨域请求时,如果需要在自定义请求头中设置类似于Authorization认证属性时,

    则该ajax请求就从简单请求变为复杂请求。CORS请求分成两类:1,简单请求。2。非简单请求

    1、简单请求

    1. 请求方法是以下三种方法之一: HEAD、GET、POST 2. HTTP的头信息不超出以下几种字段: Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain。 这就意味着,如果请求中添加了自定义Header,就属于非简单请求,就需要Server端处理预检验(Option)请求。

    2、非简单请求 
    非简单请求发送请求时,从浏览器端来看是浏览器发送了2次请求,第1次是option方法的请求,是预检请求;第2次是实际的请求。 

    浏览器会先发送一个options方法的ajax的预请求。

    这时后端需要在拦截器或者过滤器里面设置允许options请求。设置自定义的请求头属性:Authorization

    获取Response的自定义header

    如果是跨域请求(CORS), 自定义的Header会从server端的response headers 带回浏览器,但始终将无法通过代码response.headers.get(“X-TOKEN”)取得, 拦截器或者过滤器必须要添加 “Access-Control-Expose-Headers” 到Response中才行。 

  • 相关阅读:
    axios的封装
    单行和多行文本溢出省略号显示!!!
    vue2源码-响应式处理(学习笔记)-2
    vue2源码-rollup的配置(学习笔记)-1
    js的垃圾回收机制
    立即执行函数
    闭包笔记
    vue3.0的CompositionAPI
    Create gym environment with your own xml file and training it using her of baseline
    Brief introduction to mujoco or gym modeling using xml
  • 原文地址:https://www.cnblogs.com/bate/p/8638909.html
Copyright © 2011-2022 走看看