zoukankan      html  css  js  c++  java
  • 记前端跨域请求踩坑记

    今天在做Springboot +vue+axios时发送了跨域请求发现报记前端跨域踩坑,报Access to XMLHttpRequest at 'http://localhost:7050/runtime/uav/bookmark/photo/1' from origin 'http://192.168.1.112:8816' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

    翻译: 当请求凭证模式为“include”时,Access-Control-Allow-Origin这个响应头设置不能为通配符“*”,凭证模式通过XMLHttpRequest 对像的withCredentials 属性初始化。

     题外:withCredentials是xhr对象的一个属性。它的值是boolean。若为true,则执行跨域请求时在请求头中挟带凭据信息。否则不挟带。凭据信息包括cookie、http认证、客户端ssl……。常用cookie为凭据。
               axios是基于(但不限于)xhr+promise做出来的。axios也有withCredentials属性。

    原因:发送的是带有凭证的请求,但服务器没有包含这个头部,所以被浏览器拦截,所以在传传Cookie等务端的Access-Control-Allow-Origin必须配置具体的域名。

    使用带有凭证的场景:开发环境,并且需要用到登录额cookie的

    解决的方法:

    1后端解决:

        1-1在后端的过滤器中设置请求头为具体的站点不用通配符,response.setHeader("Access-Control-Allow-Origin", "允许访问的站点");

         1-2(推荐),在后端的过滤器中设置请求头为自动获取当前请求的站点,response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

    2.前端解决

         检查Axsios的配置,把http://Axios.defaults.withCredentials = true注释掉

  • 相关阅读:
    A Node Influence Based Label Propagation Algorithm for Community detection in networks 文章算法实现的疑问
    Fast Newman-FN算法以及模块度定义介绍
    Label Propagation Algorithm LPA 标签传播算法解析及matlab代码实现
    设计一个smartnic
    Intel GEN11 GPU
    Intel GEN9 GPU
    Shared Virtual Memory (SVM) Functions
    connect via ssh to virtualbox guest vm without knowing ip address
    smartnic
    技术精品翻译
  • 原文地址:https://www.cnblogs.com/superman-21/p/14065650.html
Copyright © 2011-2022 走看看