fetch跨域问题

 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

时间: 2024-08-30 05:14:37

fetch跨域问题的相关文章

javascript fetch 跨域请求时 session失效问题

javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: JSON.stringify({ data: options.data }) }) credentials: 'include' 可以是f

【原】fetch跨域请求附带cookie(credentials)

HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决跨域的方式有很多种,本文介绍"跨域请求附带发送cookie" 一.测试环境 前提:后台使用apache+php实现.apache设置多个虚拟主机,设置方式参考:http://www.cnblogs.com/sivkun/p/7347978.html 在http://a.sivkun.com域中/cors-cookie/目录下有

fetch跨域浏览器请求头待研究

fetch('https://wwww.baidu.com', {headers: { "Access-Control-Allow-Origin": "*", 'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token'}}) 原文地址:http

React + fetch API + 百度地图api + 跨域 填坑

做项目遇到一个百度地图api 的跨域问题.由于使用fetch ,在调用类似 http://api.map.baidu.com/geocoder/v2/callback=renderReverse&location=39.983424,116.322987&output=json&pois=1&ak=您的ak 的时候,不可避免的出现了跨域问题. fetch(baseUrl + 'location=39,116&output=json&ak=您的ak&c

造成跨域的原因和解决方法

浏览器的同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 从一个域上加载的脚本不允许访问另外一个域的文档属性. 举个例子:比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源), 如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码. 何谓同源:URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示它们同源. 在浏览器中,<script>.<img>.<iframe>.<

简单设置,解决使用webpack前后端跨域发送cookie的问题

最近用vue来做项目,用webpack来做前端自动化构建.webpack-dev-server会在本地搭建一个服务器,在和后端调试的时候,就会涉及到跨域的问题. 刚开始时,没有用vue-cli来构建项目,而是参考了github上的vue-vueRouter-webpack来构建.看网上的资料,vue-cli可以通过配置代理来解决跨域的问题: proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', changeOrigin: true

【JavaScript】--重点解析之跨域请求

JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON是用字符串来表示Javascript对象,例如可以在django中发送一个JSON格式的字符串给客户端Javascript,Javascript可以执行这个字符串,得到一个Javascript对象. json就是js对象的一种表现形式(字符串的形式) JSON对象语法 json语法: 数据在名称/值对中 数据由逗号分隔 花括号保存对象(对象需要使用大括号起来) 方括号保存数组(数组使

跨域(jsonp cors)

同源策略它是由NetScape提出的一个著名的安全策略. 浏览器执行js,会检查它属于哪个页面,如果不是同源页面,不会被执行. 由于浏览器的同源策略,只要发送请求url与页面地址有不同的即为跨域.只要协议.域名.端口任何一个不同,就是不同的域. 常见的解决方案有: jsonp 跨域资源共享(CORS) 使用html5的window.postMessage 通过修改document.domain 使用window.name 1.jsonp jsonp 全称是JSON with Padding,是为

JavaScript跨域请求和jsonp请求实例

<script type="text/javascript" src="./whenReady.js"></script> <script type="text/javascript"> /** * 一:跨域请求 * * 这个常见的JavaScript模块查询有href属性但没有title属性的所有<a>元素 * 并给他们注册onmouseover事件处理程序 * 这个事件处理程序使用XMLHttp