前端小白fetch https请求失败如何解决 10C

用react写了个登录的测试

 fetch('https://180.101.147.89:8743/iocm/app/sec/v1.1.0/login', {
        method: 'POST',
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: 'appId=********&secret=*******'//账号是可用的
    }).then( res => res.json() ).then( res => {
        console.log(res.toString());
        alert('恭喜您注册成功了');
    }).catch(function (err) {
        console.log(err);
    });

            Login.js:33 POST https://180.101.147.89:8743/iocm/app/sec/v1.1.0/login net::ERR_BAD_SSL_CLIENT_AUTH_CERT

在localhost:443调试返回显示的错误是net::ERR_BAD_SSL_CLIENT_AUTH_CERT
TypeError: Failed to fetch

换了个http的是可以的
该怎么导入证书

0

4个回答

你可以通过后端构建一个ssl证书 例如:可参考java 的httpClient https

0
jdk1129
jdk1129 是前后端分离的
大约一年之前 回复
jdk1129
jdk1129 证书是指服务器的证书吗?只能装在后端不能装在前端?他的后台在哪里?(原谅我真的第一次接触这些)
大约一年之前 回复

证书安装问题,具体的结合你的系统、程序(如Apache、IIS、nginx等),百度安装方法即可

0
kniferpg
kniferpg 回复jdk1129: 只能装在后端服务器上,让服务器支持ssl协议,不是在前端的
大约一年之前 回复
jdk1129
jdk1129 证书是指服务器证书吗?只能装在后端不能装在前端?他的后台在哪里?
大约一年之前 回复

在开发的时候应该不会因为证书问题出现fetch失败,看你的后台代码写对了没,后台路由地址,还有响应

0
jdk1129
jdk1129 是前后端分离的
大约一年之前 回复
jdk1129
jdk1129 请问能具体点讲解一下吗(我真的和无头苍蝇一样)我这个api是电信提供的,也给了它的证书
大约一年之前 回复

这个应该是后台请求设置问题

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用fetch轻松解决JS跨域请求问题——无需CORS,jsonp
fetch(url, {         method: "POST",   mode: "no-cors",   headers: {     "Content-Type": "application/x-www-form-urlencoded"   },   body: "请求参数"         }).then(function(res) {  console.log("R
react native 使用fetch进行网络请求(https),解决SSLHandshake问题,以及怎样进行二次封装
react native 使用fetch进行网络请求(https 问题SSLHandshake,解决办法) 使用实例demo 怎样进行封装 常见问题(超时设置、无效的ssl证书、header…) fetch原理讲解 使用实例1.使用get方式进行网络请求,例如:fetch('http://nero-zou.com/test', { method: 'GET' }).then(function(respo
html自带的fetch 异步请求 api
最简单的fetchAPI调用如下: fetch('https://api.github.com/users/chriscoyier/repos') .then(response => response.json()) .then(data => { // data就是我们请求的数据 console.log(data) }); fetch兼容性问题:可以...
react中fetch的跨域使用
react中fetch的跨域使用 一、 fetch介绍 mock.js模拟数据(可以用express代替),fetch接收数据。 二、 安装fetch Npm install whatwg-fetch –save 为了支持老版本的还需要安装es6-promise Npm install es6-promise –save 三、 fecth的引入。 ① 先建立一个f...
vue前后端分离 使用fetch 跨域请求时 session失效问题解决
前台是vue使用fetch请求后台的登录方法,但是前台浏览器的控制台中的sessionid没有,要么就是跟后台的sessionid不一致,导致后台取验证码的时候是null,因为验证码是后台存在session中   在用fetch进行网络请求的时候,发现每次请求到服务端的时候,他的sessionId 都是不一样的,后面排查原来是在请求的时候fetch默认是不会带上本地jsessionId,以至
前端利用原生fetch模拟请求接口
#模拟请求接口 Get // fetch(url,method,headers) 浏览器都支持 第一个参数是url 第二个是方法 第三个是头部信息(用户的令牌,没有不用写) fetch('http://uat.mg.kme.com/navigate/view?rminalId=999173249906806784&pcType=1', { method: 'get', ...
vue2项目,前端写请求拦截器和响应式拦截器
很可能进了个假互联网公司,遇到堆假后台,拦截器沦落到前端写。。。 import axios from 'axios' import vue from 'vue' import store from './../store/index' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode
vue中 fetch跨域请求
fetch 是原生javaScript提供的,它可以当作全局变量使用,挂载在window对象身上的 fetch的get请求方法 简单基本的fetch请求(get) <div id="app"> <button @click="getData">get请求</button> </div> <script> 是原生javaScr...
关于fetch 跨域的问题
最近在拿react+dva-cli+antd做个项目练手,搭建完项目后发现在做请求的时候走的是fetch,用的时候在跨域请求的时候出现了不少问题。在网上查了一下解决办法,提供了一个在options mods:'no-cors'配置 发现确实可以请求成功了,但是会出现下面的情况 请求成功但是看不到返回数据,查了一下是设置no-cors本身的问题,他返回的response type是opaq
fetch各种报跨域错误,数据无法获取的解决方案
1、介绍 fetch 提供了一个获取资源的接口 (包括跨域)。 fetch 的核心主要包括:Request , Response , Header , Body 利用了请求的异步特性 --- 它是基于 promise 的 2、用法 var request = new Request('/users.json', { ...
【前端库】fetch.js 网络请求
前言 fetch 是 window.fetch 的 JavaScript polyfill。全局 fetch 函数是 web 请求和处理响应的简单方式,不使用 XMLHttpRequest。这个 polyfill 编写的接近标准的 Fetch 规范。也就是说现在可以不使用ajax了,除非是兼容很低得浏览器。 该fetch()函数是一个基于Promise的机制,用于在浏览器中编程地制作Web请求...
vue前后端分离使用fetch 跨域请求时 session失效问题解决
前台是vue使用fetch请求后台的登录方法,但是前台浏览器的控制台中的sessionid没有,要么就是跟后台的sessionid不一致,导致后台取验证码的时候是null,因为验证码是后台存在session中   在用fetch进行网络请求的时候,发现每次请求到服务端的时候,他的sessionId 都是不一样的,后面排查原来是在请求的时候fetch默认是不会带上本地jsessionId,以至
react中fetch之cors跨域请求
项目中使用了react,当中需要使用fetch来代替ajax。由于react的create_react_app工具很方便,基本上开箱即用,经过创建项目,输入npm start命令后,便自动监听一个3000的端口,到此前端部分就绪。 具体参考:https://github.com/facebookincubator/create-react-app后端部分我使用了phalcon。 由于前后端分离,
fetch跨域实现及post传参问题
fetch跨域有两种方法: 1.前端jsonp跨域 2.后端设置cors跨域   首先,尝试了jsonp跨域,可以轻松成功连接上豆瓣API 引入包 fetch-jsonp   try{ const url = `https://api.douban.com/v2/book/search?q=${searchName}&count=20`; y...
ES6跨域数据访问fetch-jsonp
本篇文章分为三个部分:一、索引说明;二、使用环境介绍;三、fetch-jsonp实现分析。一、索引说明本篇文章要说明的是一款跨域数据请求的库文件fetch-jsonp,这是一款github上开源文件,基于ES6下的Promise设计实现,可以在某些情况下替代$.ajax实现数据的跨域访问,github上有非常详细的API说明及使用实例,本文只列举一个简单的例子用于说明,具体还请移步GIT查看。首先...
[iOS]React-Native fetch访问HTTPS自签名证书服务器错误
如果服务器是持有自签名证书,React-Native fetch访问会报错 解决方法: 找到RCTNetwork.xcodeproj中的RCTHTTPRequestHandler.m文件, 在#pragma mark - NSURLSession delegate下面增加以下代码: - (void)URLSession:(NSURLSession *)session didReceiveChall...
React 采用Fetch方式发送跨域POST请求
React采用Fetch方式发送跨域POST请求
测试请求,报415的解决方法
在进行测试时,发现请求返回415 解决方法: 把headers中Content-Type写为application/json 然后这个post请求中的参数是要放到URL中去的,而不是放到body里 原因 Query String Parameters里面的参数要放到URL里,不能放到body里,不然服务器识别不出来。 问题解决 ...
React Native探索(五)使用fetch进行网络请求
React Native可以使用多种方式来请求网络,比如fetch、XMLHttpRequest以及基于它们封装的框架,fetch可以说是替代XMLHttpRequest的产物,这一节我们就来学习fetch的基本用法。
Https请求验证工具类
Https请求验证工具类,解决javax.net.ssl.SSLHandshakeException验证失败的错误
兼容IE6的fetch polyfill
react社区起来后,不满足现在的AJAX方案,搞了一个fetch。fetch只有在一些非常新的浏览器才支持,而github上的fetch却最多兼容到IE8,并且麻烦得要死,需要安装一大堆polyfill才能运行起来。 于是我搞了一个兼容IE6的polyfill。用法与原生的一模一样。 npm install fetch-polyfill...
ES6中fetch的post的前后端node传参的问题
ES6中fetch大有取代ajax的现象,fetch一般用法为fetch(url,option).then().catch(); 我们使用post方式传参时,一般在option中希望直接传json形式,可是后台node无法接收到数据;代码如下://前台代码 fetch(url , { method: 'POST', headers: {}, body:obj, //obj
react native 执行fetch在安卓没问题,ios上却提示网络请求失败?
在ios模拟器上运行结果就是这样的, 看到这个问题有时候会有很多种原因, 1.iOS 强制要求使用 https,如果你请求的接口是 http协议就会出错,临时解决办法是在 Info.plist 里面加上:NSAppTransportSecurity NSAllowsArbitraryLoads 或是在下面的配置中进行设置:
React Native 采用Fetch方式发送跨域POST请求
Fetch以后是趋势,势必要取代传统的Ajax,而且RN框架支持Fetch。下面仅做了一个跨域请求的例子,在本域请求是一样的,而且更简单一些。客户端环境用的是RN写的一个页面,也可以用浏览器的console控制台模拟。后端服务用的是NodeJs express框架。    1)Fetch请求 //发送Ajax请求 sendAjax(){ //POST方式,IP为本
ReactNative之fetch请求报错解决
onLoad(url){ fetch(url) .then(response=>response.json()) .then(result=>{ this.setState({ result:JSON.stringify(result) }) })
fetch捕获重定向302/301
读完本文大约需要5分钟 本文前置知识:HTTP状态码、fetch 阅读难度:初级 本文关键代码及输出结果都写了出来,可以不用编译器编译,直接浏览文章 事情发生在昨天,在调用接口的时候,接口写错了: /xxx/interventionlist 写成了 /xxx/Interventionlist 果不其然红一片,点开network后,找到调用的接口 ⬇️ 这里的302是对404处理后的结果...
前端技术整理之fetch
前言 The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful an...
React Native入门(八)之网络请求Fetch
前言最近有些事情要忙,RN相关的内容没有更新,现在就来了解一下RN中进行网络请求相关的内容!介绍React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。 关于Fetch API的相关内容,可以到下边网站了解: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 我们这先大致说一下在RN中
fetch进行post请求为什么会首先发一个options 请求?
不仅仅是fetch,只要你满足以下几种情况,都会去发起一个 Preflighted requests,也就是options请求,参见上面链接。 It uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than applic...
fetch/springboot实现跨域访问
fetch端: let obj = {projectName:"xxx"} fetch("http://localhost:8095/config/project/add",{ method:'post', mode: 'cors', credentials: 'omit', headers:{'Content-type'...
RN 的 fetch 组件网络请求
创建一个.js 文件import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native';/* * 在 ReactNative 中,使用 fetch 实现网络请求. fetch
react-native网络请求Fetch中遇到的坑
1.没有网络超时时间字段 身为一个官方的网络请求工具居然没有网络请求超时的字段,这样是实在说不过去的。这给我们开发过程中带来了很多不必要的麻烦。比如,想做一个loading工具,可是不知道不知道什么时候是网络超时,什么时候网络异常,这个就尴尬了!解决方案: 1.js端来解决 使用fetch请求的时候通常返回的是一个promise对象,然后再去解析这个promise对象,才能得到的我们需要的
fetch 请求数据 以及 node 后端 post请求获取不到数据的记录
axios 用过之后就不想在用了所以就用了fetch 在使用fetch请求由node构建 的服务的时候     get 请求能沟通过req,query请求过来参数但是post不行   所以需要引用body-parmr   或者使用formidable来进行post数据的解析 import formidable from 'formidable'; import timeF
前后端联调接入第三方接口之302游戏大作战的故事
业务背景:  接入第三方接口,获取用户名,实现用户登陆 接口采用Java编写,我们的平台前端业务使用React.js  后端采用PHP实现数据接口 业务流程:  前端向后端发请求,后端调用第三方接口,第三方接口实现跳转并跳转到登陆页面,登陆页面里面有一个回调地址,也就是登陆成功以后返回到调用该接口的地址。目标是返回到前端首页,并显示用户名。 302游戏大作战 关卡1 :由于r
跨域请求 fetch 实现
reference : [1].https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 1.CORS 的分类分为两大类:简单的请求;带有preflight预请求的CORS。两类请求的区分标准如下:简单请求某些请求不会触发 CORS 预检请求。本文称这样的请求为“简单请求”。若请求满足所有下述条件,则该请求可视为“简
Magento2开发教程 - 503(Backend Fetch Failed后端获取失败)解决方法
如果Magento2缓存标签使用长度超过8192个字符,你可以看到HTTP 503(后台读取失败)在浏览器中的错误。这些错误可能显示如下: Error 503 Backend fetch failed Backend fetch failed 为了解决这个问题,修改varnish配置文件如下: 用 root 用户打开: CentOS 6: /etc/sysconfig/var
基于原生fetch封装一个带有拦截器功能的fetch,类似axios的拦截器
背景 为什么要给fetch增加拦截器?浏览器提供的fetch方法不够用吗? 是的。原生fetch确实不够用。 在项目中,如果想要在所有的网络请求之前往header中加入权限信息(比如:authorization=xxxx)。用原生fetch的话,你只能在每个fetch请求的时候,header配置中写上authorization=xxxx。或者在请求结果返回来之后,对响应结果做一些特殊处理,在原生f...
fetch移动端浏览器兼容问题解决
1,各个浏览器对fetch的支持情况 :http://caniuse.com/#search=fetch 原因:Proimse在低版本上的支持问题, 解决方案: 手动写个文件引入pinkie-promise,判断当前是否有window.Promise,如果没有就把我引入的作为window.Promise.、 实施步骤:(react + webpack项目为例) 1,添加 w
springboot,后端如何获取fetch传来的数据
一、 我前端比较常用的是直接用formdata打包表单值向后端传值 request.getParameter(key)中key是表单中的name属性的值 也可以这样取值 二、 也可以直接用fetch的url传值 后台接收值也和普通的url请求一样 三、 如果含有文件的话 后台这样 注意,如果直接用fetch想要获取session的值的话,请在前端js的fetch中加入 crede...
React Native项目实战之fetch请求并填充界面
fetch简介在 AJAX 时代,进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架。 fetch相比XMLHttpRequest,提供更加强大、高效的网络请求方式,所以在 Hybrid App 开发模式中,大量的用到了fetch框架作为网络请求。fetch在浏览器中使用在 Chr