我创建了一个网站example.com,其中有两个部分称为“服务”和“想法”是动态数据。这是来自http://api.example.com/ourservice.json和http://api.example.com/ideas.json
在我的项目中,当我在localhost中运行它时,它会从API中获取这些数据,但当我在服务器中上传react build
文件夹时,它不会获取这些数据。
我有什么遗漏吗?是API的问题吗?
在api.example.com的配置文件的nginx中,我有这样的配置
server {
# Binds the TCP port 80.
listen 80;
# Root directory used to search for a file
root /var/www/html/example_static_api;
# Defines the file to use as index page
index index.html index.htm;
# Defines the domain or subdomain name.
# If no server_name is defined in a server block then
# Nginx uses the 'empty' name
server_name api.example.com;
location / {
# Return a 404 error for instances when the server receives
# requests for untraceable files and directories.
try_files $uri $uri/ =404;
add_header Access-Control-Allow-Origin *;
}
}
有什么我遗漏了的!
2条答案
按热度按时间8yoxcaq71#
下面的链接解释了这个问题的原因以及如何解决它。简而言之,我想告诉你,因为你调用的服务没有ssl证书,必须调用https,你可以很容易地在浏览器控制台中看到这个错误
How to fix "insecure content was loaded over HTTPS, but requested an insecure resource"
nsc4cvqm2#
在StackOverflow上搜索后,我找到了答案,有两种方法可以解决这个问题。第一种方法是将SSL添加到API URL中。
第二件事最初由@buzatto回答here。
“这与这样一个事实有关,即API是在HTTP上提供的,而您的站点是在https上加载的,因此浏览器会阻止请求。
由于您无法控制第三方API,因此您可以通过添加 meta标签
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
来解决该问题。“