英文:

When I set up SSL/TLS in React and Spring using CloudFlare, no axios requests are made from React to Spring

问题

以下是您要翻译的内容：

"It's a bit long, but I've listed all the situations to make it specific to the situation I'm in, and I hope you understand..."

"我描述了一些情况，可能有点长，但我希望能够使问题更具体，希望你能理解..."

"I installed react and spring on a Linux Ubuntu server and separated the frontend from the backend. I'm using axios to communicate with react when I need to make specific requests."

"我在Linux Ubuntu服务器上安装了React和Spring，并将前端与后端分开。在需要进行特定请求时，我使用axios与React进行通信。"

"I also installed and used Nginx to deploy the react application. When I enter the ip address from an external PC, it enters normally."

"我还安装并使用了Nginx来部署React应用程序。当我从外部计算机输入IP地址时，它可以正常访问。"

"I purchased a domain called isakgo.com from CloudFlare and registered it with DNS Records. Now, when I type in isakgo.com and enter it, I get to the webpage fine."

"我从CloudFlare购买了一个名为isakgo.com的域名，并在DNS记录中注册了它。现在，当我输入isakgo.com并访问时，网页可以正常显示。"

"The problem occurred while setting up HTTPS. In CloudFlare, I set Full (strict) in SSL/TLS, enabled Always Use Https, and generated an 'Origin Certificate' and 'Private Key' via Create Certificate in CloudFlare."

"问题出现在设置HTTPS时。在CloudFlare中，我将SSL/TLS设置为Full（strict），启用了Always Use Https，并通过在CloudFlare中创建证书生成了'Origin Certificate'和'Private Key'。"

"I moved these keys into the /etc/ssl folder on Linux. I named the Origin Certificate isakgo.com.pem and the Private Key isakgo.com.key."

"我将这些密钥移动到了Linux的/etc/ssl文件夹中。我将Origin Certificate命名为isakgo.com.pem，将Private Key命名为isakgo.com.key。"

"Next, I set the sites-available/default file in Nginx to the following."

"接下来，我将Nginx中的sites-available/default文件设置如下："

server {
    listen 80;
    server_name isakgo.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name isakgo.com;

    ssl_certificate /etc/ssl/isakgo.com.pem;
    ssl_certificate_key /etc/ssl/isakgo.com.key;

    location / {
        root /root/front_react/my-app/build/;
        try_files $uri /index.html;
    }
}

"Restart Nginx and go to isakgo.com, and you will automatically be directed to https://isakgo.com."

"重新启动Nginx并访问isakgo.com，你将自动重定向到https://isakgo.com。"

"Now that we're on https when accessing our react application, it's time to set spring to https. I proceeded as follows"

"现在，在访问我们的React应用程序时，已经使用https，现在是时候将Spring设置为https了。我按照以下步骤进行："

"Using the isakgo.com.pem and isakgo.com.key that we created in CloudFlare earlier, I created a keystore in pkcs12 format because spring doesn't recognize the pem format. I executed the following command to create it."

"使用之前在CloudFlare中创建的isakgo.com.pem和isakgo.com.key，我创建了一个pkcs12格式的密钥库，因为Spring不识别pem格式。我执行了以下命令来创建它。"

openssl pkcs12 -export -inkey isakgo.com.key -in isakgo.com.pem -out keystore.p12 -name jspSpring

"Now I moved the file named keystore.p12 inside src/main/resources, which is the path corresponding to classpath: in spring. Then I opened application.yml with vim and modified it like this"

"现在，我将名为keystore.p12的文件移动到了src/main/resources中，这是Spring中classpath:对应的路径。然后，我用vim打开了application.yml并进行了如下修改："

server:
  port: 8443
  ssl:
    enabled: true
    key-store: classpath:keystore.p12
    key-store-password: my-password
    key-store-type: PKCS12
    key-alias: jspSpring

"That's it, we have built the spring project with ./gradlew build command and executed that spring project with java -jar command (using built-in Tomcat)."

"就是这样，我们使用./gradlew build命令构建了Spring项目，并使用java -jar命令执行了该Spring项目（使用内置的Tomcat）。"

"Now, press a specific button on the react server (isakgo.com) to send an axios.post request to spring with the following format."

"现在，在React服务器（isakgo.com）上按下特定按钮，以以下格式发送axios.post请求给Spring。"

await axios.post("https://isakgo.com/api/processLogin");

"/api/precessLogin is the endpoint that is associated with the @PostMapping annotation in spring."

"/api/processLogin是与Spring中的@PostMapping注解相关联的端点。"

"However, we get the following error here."

"但是，在这里我们遇到了以下错误。"

xhr.js:251 POST https://My-IP:8443/api/processLoginnet::ERR_CERT_AUTHORITY_INVALID

"It says it's invalid, but I'm not sure where I made a mistake - I'm guessing it's the openssl part, but that's not quite right."

"它说是无效的，但我不确定我犯了哪个错误 - 我猜测是openssl的部分，但那不太对。"

"Also, to try another way around it, I tried using Let's Encrypt instead of using the .pem and .key issued by CloudFlare. With that, after modifying the Nginx config file appropriately, I get the following error when I run it."

"此外，为了尝试另一种方法，我尝试使用Let's Encrypt而不是使用CloudFlare颁发的.pem和.key文件。但是，在适当修改Nginx配置文件后，运行时我得到了以下错误。"

POST https://My

<details>
<summary>英文:</summary>

It&#39;s a bit long, but I&#39;ve listed all the situations to make it specific to the situation I&#39;m in, and I hope you understand...

I installed react and spring on a Linux Ubuntu server and separated the frontend from the backend. I&#39;m using axios to communicate with react when I need to make specific requests.

I also installed and used Nginx to deploy the react application. When I enter the ip address from an external PC, it enters normally.

I purchased a domain called isakgo.com from CloudFlare and registered it with DNS Records. Now, when I type in isakgo.com and enter it, I get to the webpage fine.

The problem occurred while setting up HTTPS. In CloudFlare, I set Full (strict) in SSL/TLS, enabled Always Use Https, and generated an &#39;Origin Certificate&#39; and &#39;Private Key&#39; via Create Certificate in CloudFlare.

I moved these keys into the /etc/ssl folder on Linux. I named the Origin Certificate isakgo.com.pem and the Private Key isakgo.com.key.

Next, I set the sites-available/default file in Nginx to the following.

server {
listen 80;
server_name isakgo.com;
return 301 https://$host$request_uri;
}

server {
listen 443 ssl;
server_name isakgo.com;

ssl_certificate /etc/ssl/isakgo.com.pem;
ssl_certificate_key /etc/ssl/isakgo.com.key;
location / {
root /root/front_react/my-app/build/;
try_files $uri /index.html;
}

}

Restart Nginx and go to isakgo.com, and you will automatically be directed to https://isakgo.com.
Now that we're on https when accessing our react application, it's time to set spring to https. I proceeded as follows
Using the isakgo.com.pem and isakgo.com.key that we created in CloudFlare earlier, I created a keystore in pkcs12 format because spring doesn't recognize the pem format. I executed the following command to create it.

openssl pkcs12 -export -inkey isakgo.com.key -in isakgo.com.pem -out keystore.p12 -name jspSpring

Now I moved the file named keystore.p12 inside src/main/resources, which is the path corresponding to classpath: in spring. Then I opened application.yml with vim and modified it like this
```yaml
server:
port: 8443
ssl:
enabled: true
key-store: classpath:keystore.p12
key-store-password: my-password
key-store-type: PKCS12
key-alias: jspSpring

That's it, we have built the spring project with ./gradlew build command and executed that spring project with java -jar command (using built-in Tomcat).

Now, press a specific button on the react server (isakgo.com) to send an axios.post request to spring with the following format.

await axios.post("https://isakgo.com/api/processLogin");

/api/precessLogin is the endpoint that is associated with the @PostMapping annotation in spring.

However, we get the following error here.

xhr.js:251 POST https://My-IP:8443/api/processLoginnet::ERR_CERT_AUTHORITY_INVALID

It says it's invalid, but I'm not sure where I made a mistake - I'm guessing it's the openssl part, but that's not quite right.

Also, to try another way around it, I tried using Let's Encrypt instead of using the .pem and .key issued by CloudFlare. With that, after modifying the Nginx config file appropriately, I get the following error when I run it.

POST https://My-IP:8443/api/processLogin net::ERR_CERT_COMMON_NAME_INVALID

My guess is that the above issue is caused by using CloudFlare and using Certbot at the same time. I'm not sure how to resolve this issue.

Does anyone know of a way to resolve this issue, while still utilizing CloudFlare?

答案1

得分: 1

我不看到您的配置和PKCS12文件有任何问题。此外，我已验证您的服务网址（https://isakgo.com:8443/api/processLogin），似乎没有问题。请您确认是否可以在同一浏览器中访问该网址，并且在浏览器中显示为安全。

英文:

I don't see any issue with your configuration and PKCS12 file. Also, I have verified your service URL (https://isakgo.com:8443/api/processLogin) which seems ok. Can you please confirm whether you can access the URL in the same browser, and it shows secure in your browser.