`

Js设置前端允许跨域请求后端API:Access-Control-Allow-Credentials

    博客分类:
  • js
阅读更多

跨域报错信息:

Fetch API cannot load https://xxx.com/api. Response to preflight 
request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Credentials' header 
in the response is '' which must be 'true' 
when the request's credentials mode is 'include'. 
Origin 'https://xxx.com' is therefore not allowed access.

 

Method1:纯js

export function Cors(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.withCredentials = true; // 设置运行跨域操作
    xhr.send();
    xhr.onload = () => {
      const text = xhr.responseText;
      if (xhr.status === 200) {
        resolve(JSON.parse(text));
      } else {
        let error = new Error(text);
        error.response = xhr;
        reject(error);
      }
    };
  });
}

 

Methods2:jQuery版

$.ajax({
  url : 'xxx',
  xhrFields: {
    withCredentials: true // 设置运行跨域操作
  },
  success : function(data) {
    console.log(data);
  }
});

 

 

Methods3:fetch(部分浏览器不兼容,不建议使用)

export function Get(url) {
  const config = {
    method: 'get',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    credentials: 'include'
  };
  return fetch(url, config)
    .then(checkStatus)
    .then(parseJSON);
}

 

Methods4: axios.js跨域:

axios(url, {
  method: 'GET',
  mode: 'no-cors',
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json',
  },
  withCredentials: true,
  credentials: 'same-origin',
}).then(response => {
})

 

更多实例应用扫码体验:

分享到:
评论
1 楼 自己811005 2018-01-14  
88350bcf69dcfbda7f8a76a589d90543

相关推荐

    Nginx跨域设置Access-Control-Allow-Origin无效的解决办法

    add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置,生效。 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-...

    Access-Control-Allow-Origin跨域问题的终极解决,给自己做备份

    2. 前端配置:在前端,使用现代的Fetch API或XMLHttpRequest时,可以通过设置withCredentials标志,配合服务器端设置Access-Control-Allow-Credentials,实现带有Cookie的跨域请求。 3. 预检请求(Preflight ...

    TOMCAT 跨域 CORS Access-Control-Allow-Origin cors-filter

    配置通常包括指定过滤器类、设置过滤器映射以及配置CORS相关的属性,例如`Access-Control-Allow-Origin`的值、是否允许携带凭证(`Access-Control-Allow-Credentials`)、暴露的头部信息(`Access-Control-Expose-...

    Allow-Control-Allow-Origin谷歌跨域插件

    - `Access-Control-Allow-Credentials`:如果设置为true,表示跨域请求可以携带cookies,否则默认不携带。 5. 谷歌跨域插件的工作原理:这些插件通常会修改或注入JavaScript代码,以改变浏览器的默认行为,允许...

    异常 AJAX 跨域请求报:No ‘Access-Control-Allow-Origin‘ header is present

    当你尝试使用AJAX(异步JavaScript和XML)进行跨域请求时,如果服务器没有正确设置允许跨域的响应头,浏览器就会抛出“No ‘Access-Control-Allow-Origin‘ header is present”的错误。这个错误表明服务器返回的...

    允许CORS:访问控制_-_允许来源「Allow_CORS__Access-Control-Allow-Origin」_0_1_1_0_10_18_38.zip

    3. `Access-Control-Allow-Credentials`:若设置为`true`,则允许跨域请求携带cookie,否则忽略cookie。 4. `Access-Control-Max-Age`:定义预检请求的缓存时间,避免频繁发送预检请求。 **五、安全与最佳实践** 1...

    Access-Control-Allow-Origin 0.1.5_0

    开发者还需要注意其他几个相关的响应头字段,如 "Access-Control-Allow-Methods"(定义了允许的HTTP方法)、"Access-Control-Allow-Headers"(定义了允许的自定义请求头)以及"Access-Control-Allow-Credentials"...

    已解决:No 'Access-Control-Allow-Origin'跨域问题

    此外,你还可以配置其他CORS相关的头部,比如`Access-Control-Allow-Credentials`(允许携带cookie的跨域请求)、`Access-Control-Max-Age`(缓存预检请求的时间)等,来进一步定制跨域策略。 总的来说,解决"No '...

    SpringBoot跨域Access-Control-Allow-Origin实现解析

    SpringBoot 跨域 Access-Control-Allow-Origin 实现解析 SpringBoot 跨域 Access-Control-Allow-Origin 实现解析是指在 SpringBoot 框架中解决跨域问题的方法。跨域是指不同域名之间相互访问,浏览器不能执行其他...

    Allow-Control-Allow-Origin

    除了Allow-Control-Allow-Origin,还有其他相关的响应头,如Access-Control-Allow-Methods(允许的HTTP方法)、Access-Control-Allow-Headers(允许的请求头)和Access-Control-Allow-Credentials(是否允许携带...

    allow-cors-access-control.crx.zip

    3. 对于需要发送Cookie的跨域请求,还需要同时设置`Access-Control-Allow-Credentials`为`true`。 4. 另外,还可以通过`Access-Control-Allow-Methods`指定允许的HTTP方法,`Access-Control-Allow-Headers`指定允许...

    allow-cors-access-control插件.zip

    4. **凭证共享**:如果要跨域传输Cookie或其他认证信息,服务器还需要在响应头中设置`Access-Control-Allow-Credentials`为true。 5. **缓存处理**:预检请求的结果会被浏览器缓存,以减少后续请求的延迟。 这个...

    跨域Access-Control-Allow-Origin解决方案.docx

    针对上述示例中的问题,可以通过设置响应头中的`Access-Control-Allow-Origin`字段来允许跨域访问。具体实现方式如下: ```java @SpringBootApplication @Configuration @RestController public class ApplicationA...

    解决方案 ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’

    Control-Allow-Origin`,你可能还需要设置其他CORS相关的头部,如`Access-Control-Allow-Methods`(允许的方法),`Access-Control-Allow-Headers`(允许的自定义头部),以及`Access-Control-Allow-Credentials`(是否...

    跨域请求jar包

    4. **带凭证的跨域请求**:如果需要在跨域请求中携带用户凭证(如cookie),则服务器需要设置`Access-Control-Allow-Credentials`为true,并且`Access-Control-Allow-Origin`不能设为通配符"*",必须明确指定源。...

    allow-cors-access-control.zip

    Control-Allow-Methods`(指定允许的方法)、`Access-Control-Allow-Headers`(指定允许的自定义头部)、`Access-Control-Max-Age`(预检请求缓存时间)、`Access-Control-Allow-Credentials`(是否允许携带Cookie等...

    前端后端跨域问题

    ### 前端后端跨域问题解析及解决方案 #### 跨域问题概述 跨域问题,即Cross-Origin Resource Sharing(CORS),是指浏览器出于安全考虑,在不同源之间执行网络请求时实施的一种限制机制。根据同源策略的规定,只有...

    ajax跨域请求demo.zip

    `Access-Control-Allow-*`头字段是CORS(Cross-Origin Resource Sharing,跨源资源共享)机制的一部分,用于告知浏览器服务器允许哪些来源的请求。 总结来说,这个压缩包提供的示例展示了如何使用jQuery的Ajax进行...

Global site tag (gtag.js) - Google Analytics