fetch跨域问题

最新推荐文章于 2024-12-19 00:42:12 发布

转载最新推荐文章于 2024-12-19 00:42:12 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/BlingSun/p/9777059.html

文章标签：

#json

本文深入解析了使用fetch API进行跨域POST请求的具体方法，包括如何正确设置请求头以避免常见错误，如设置credentials属性和Access-Control-Allow-Origin的问题。通过实例展示了如何在跨域请求中包含cookie，以及如何处理响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 fetch(url,{
        method:'post', 
        mode:"cors",      //允许跨域  no-cors不允许跨域
      //  credentials:"include",  //跨域请求时是不带cookie的，添加该属性表示强制加入凭据头,请求时就会携带cookie。但是如果加上这个属性，那么服务器的Access-Control-Allow-Origin 就不能是‘*’，否则会报下面的错误。
        headers:new Headers({
         'Content-Type': 'application/x-www-form-urlencoded', // 指定提交方式为表单提交
          }),
          body:formdate
        }) .then(function(response) {
    
    return response.json();

  }).then(function(json) {
    console.log('parsed json', json);
    
  }).catch(function(ex) {
    console.log('parsing failed', ex);
   
  })

跨域设置credentials:"include"时，如果服务器端设置Access-Control-Allow-Origin 为‘*’会报如下错误。可以去掉该请求头的设置，只添加mode:'cors'属性。

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'. Origin 'http://localhost:8080' is therefore not allowed access.

转载于:https://www.cnblogs.com/BlingSun/p/9777059.html