前端跨系统请求接口报错

已知:后端可以正常访问接口,服务器端是联通的

前端写代码访问接口报错

前端代码如下:

javascript 复制代码
const projectNo = 'HACFA201';
const url = `http://xxxx/api/xx/xxxxx/getProjectInfo?projectNo=${encodeURIComponent(projectNo)}`;

// 使用fetch发送GET请求
fetch(url, {
    method: 'GET', 
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded' 
    }
})
.then(response => {
    if (response.ok) { 
        return response.json(); 
    } else {
        throw new Error(`网络响应异常,状态码:${response.status}`);
    }
})
.then(data => {
    console.log('委托项目信息:', data);
})
.catch(error => {
    console.error('请求发生错误:', error);
});

报错如下:

Mixed Content: The page at 'https://bxxxx was loaded over HTTPS, but requested an insecure resource 'http://xxxx/api/xx/xxxxx/getProjectInfo?projectNo=HACFA201'. This request has been blocked; the content must be served over HTTPS.

原因

因为我的网页是通过HTTPS加载的,但是尝试请求一个HTTP资源。现代浏览器出于安全考虑会阻止这种"混合内容"请求,以防止中间人攻击和其他潜在的安全风险。

要解决这个问题,需要确保API端点也使用HTTPS协议。如果API服务器支持HTTPS,请将URL中的http改为https。如果API服务器不支持HTTPS,则可能需要联系API提供者来启用HTTPS支持。

假设API服务器确实支持HTTPS,那么可以简单地修改URL如下:

javascript 复制代码
// 构造完整的URL,注意这里使用了HTTPS
const url = `https://`;

如果确定服务器支持HTTPS但仍然遇到问题,可能是由于自签名证书或证书链的问题。在这种情况下,可能需要配置服务器的SSL证书或者在客户端代码中(仅用于开发环境)忽略证书错误,但这通常不是推荐的做法,因为这会降低安全性。

如果API服务器真的不支持HTTPS,并且无法更改这一点,那么可能需要重新考虑应用程序的设计,或者寻找其他方法来保证数据传输的安全性。例如,可以在后端服务器上设置一个代理,这个代理通过HTTPS接收来自前端的请求,然后通过HTTP与内部服务通信。这样可以保持前端到后端通信的安全性。

相关推荐
专注VB编程开发20年36 分钟前
C# .NET支持多线程并发的压缩组件
开发语言·前端·c#·.net·多线程·zip·压缩
暖木生晖41 分钟前
css3背景线性渐变:linear-gradient
前端·html·css3
mldong1 小时前
开源项目推荐 _ mldong-art-design:企业级管理系统快速开发框架
前端·vue.js·架构
百思可瑞教育1 小时前
vue的动态组件keep-alive实现组件缓存和状态保留
前端·vue.js·缓存·北京百思可瑞教育·百思可瑞教育
IT_陈寒2 小时前
SpringBoot性能翻倍秘籍:从自动配置到JVM调优的7个实战技巧
前端·人工智能·后端
叮咚前端2 小时前
vue3笔记
前端·javascript·笔记
薛定谔的算法2 小时前
面试官问箭头函数和普通函数的区别?这才是面试官最想听到的
前端·javascript·面试
pepedd8642 小时前
AI Coding 最佳实践-从零到一全栈项目编写
前端·aigc·trae
砂糖橘加盐2 小时前
非 AI 时代前端是如何设计一个组件的
前端·javascript·vue.js
艾小码2 小时前
告别JavaScript类型转换的坑:从隐式陷阱到显式安全指南
前端·javascript