Resolve cross-domain errors

1. Solve cross-domain error reporting

Mixed Content The page at was loaded over HTTPS but requested an insecure resource This request has been blocked the content must be served over HTTPS

The above error message must be familiar to everyone.

First, let’s mention what cross-domain is.

Cross-domain is: protocol, host, port. As long as one of the three is different, it will constitute cross-domain. Only when these three are the same are they considered to be of the same origin. In order to ensure security, browsers only require requests from the same origin to obtain content from each other.

1.1 Reproduction of problem scenarios

Recently developed an intelligent customer service robot (actually calling a third-party API interface) and deployed it to Linux for use< a i=3> certificate, that is, the protocol is used to access the conversation page, but the returned in the request interface is protocol, because we need to get the images, audios, and videos returned by the interface, and then put them into the corresponding tags. However, the browser will prevent loading because it is cross-domain. SSLhttpsurlhttpurl

2. Solution

2.1 Most recommended solution

Usenginx as a reverse proxy, allowing us to request the relative path of our project, and then reverse proxy to the url returned by the interface through Nginx.

server {
 listen       80;
 server_name  192.168.17.129;

 location /yunwen {
  root   html;
  index  index.html index.htm;
  proxy_pass  http://api.yunwen.com
 }
}

The above/yunwen means that when we request this url, we will reverse proxy to http://api.yunwen.com.

2.2 Least recommended solution

Modify the security settings in the browser and add the protocol and IP or domain name returned by the changed interface to the trust list.

You can use the following command to open the settings of Google Chrome.

chrome://flags/#unsafely-treat-insecure-origin-as-secure

2.3 Other solutions

You can modify the backend code to forward it through the backend interface.