What is cross-domain and how to solve cross-domain problems

what is cross domain

In the development of the web field, the front-end and back-end separation modes are often used. In this mode, the front-end and back-end are independent web applications, for example: the back-end is a Java program, and the front-end is a React or Vue application.

When independent web apps access each other, cross-domain problems are bound to exist.

There are generally two ways to solve cross-domain problems, and how to solve them with nginx

1. CORS
sets the HTTP response header on the backend server, and adds the domain name you need to allow access to Access-Control-Allow-Origin.

2. jsonp
uses the backend to construct json data according to the request and returns it, and the frontend uses jsonp to cross-domain.

These two approaches are not discussed in this paper.

It should be noted that nginx also provides a cross-domain solution based on the first idea.

Example: www.helloworld.com website is composed of a front-end app and a back-end app. The front-end port number is 9000, and the back-end port number is 8080.

If the front-end and back-end interact using http, the request will be rejected because of cross-domain issues. Let's see how nginx solves it:

First, set cors in the enable-cors.conf file:

allow origin list

set $ACTION '*';

set single origin

if ($htt{p}_{o}rigin\ast (www.helloworld.com)$) {
set $ACAO $http_origin;
}

if (KaTeX parse error: Expected '}', got 'EOF' at end of input: …Allow-Origin' "http_origin";
add_header ‘Access-Control-Allow-Credentials’ ‘true’;
add_header ‘Access-Control-Allow-Methods’ ‘GET, POST, OPTIONS’;
add_header ‘Access-Control-Allow-Headers’ ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type’;
}

if ($request_method = ‘OPTIONS’) {
set $cors"${cors}options";
}

if ($request_method = ‘GET’) {
set $cors"${cors}get";
}

if ($request_method = ‘POST’) {
set $cors"$ {cors}post";
}
Next, include enable-cors.conf in your server to introduce cross-domain configuration:

----------------------------------------------------

This file is a project nginx configuration fragment

You can directly include in nginx config (recommended)

Or copy to the existing nginx and configure it yourself

The www.helloworld.com domain name needs to be configured with dns hosts

Among them, the api has enabled cors, which needs to cooperate with another configuration file in this directory

----------------------------------------------------

upstream front_server{
server www.helloworld.com:9000;
}
upstream api_server{
server www.helloworld.com:8080;
}

server {
listen 80;
server_name www.helloworld.com;

location ~ ^/api/ {
include enable-cors.conf;
proxy_pass http://api_server;
rewrite “^/api/(.*)$” /$1 break;
}

location ~ ^/ { proxy_pass http://front_server; } } Here, it's done.