Shulou(Shulou.com)06/02 Report--

This article focuses on "nginx front and rear separation to solve cross-domain problems", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "nginx front and rear separation to solve cross-domain problems"!

Scene

It is suitable for the company to have a front end, and the project adopts front-end separation. Similar to the interface provided by our back-end springboot, the front end specifically writes html to call the corresponding interface to solve cross-domain problems.

Configuration description worker_processes 1 worker_connections events {include mime.types; default_type application/octet-stream; client_max_body_size 10240;} http {include mime.types; default_type application/octet-stream; client_max_body_size 200M; client_header_buffer_size 8k; large_client_header_buffers 8 16k Log_format main'$remote_addr-$remote_user [$time_local] "$request"'$status $body_bytes_sent "$http_referer"'"$http_user_agent"$http_x_forwarded_for"; access_log on; sendfile on; keepalive_timeout 300; gzip on; gzip_http_version 1.0 Gzip_disable "MSIE [1-6]."; gzip_types text/plain application/x-javascript text/css text/javascript; server {listen 80; server_name localhost; client_header_buffer_size 8k; large_client_header_buffers 8 16k; root / usr/share/nginx/html Location / {# forwards the request under the path to the development server opened by the front-end tool chain (such as gulp,webstorm,anywhere) # if it is a production environment, configure it as a static file server # proxy_pass http://localhost:80; # proxy_redirect default using instructions such as root } location / management/ {# forward the request under the / api path to the real back-end server proxy_pass http://192.168.199.131:8090/management/; proxy_cookie_path / management/ /; proxy_set_header Host $host; proxy_set_header Cookie $http_cookie; proxy_set_header Remote_Addr $remote_addr Proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 200m; proxy_connect_timeout 18000; proxy_send_timeout 18000; proxy_read_timeout 18000;} location / agents/ {proxy_pass http://192.168.199.131:8092/; Proxy_cookie_path / agents/ /; proxy_set_header Host $host; proxy_set_header Cookie $http_cookie; proxy_set_header Remote_Addr $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 200m Proxy_connect_timeout 18000; proxy_send_timeout 18000; proxy_read_timeout 18000;}

Focus on the configuration of location.

For example, the request address http://localhost:80/index.html of frontend html

The address of the front-end calling interface is http://localhost:80/api. In fact, api is not under the changed domain. Under http://192.168.199.111:8888/, two problems need to be solved. The front-end ajax is forwarded to the corresponding location across domains and interfaces.

* * focus on 1 2 3 * *

Location / api/ {/ / 1 proxy_pass http://192.168.199.111:8888/; / / 2 proxy_cookie_path / api/ /; / 3 proxy_set_header Host $host; proxy_set_header Cookie $http_cookie; / / send cookie to solve the session consistency problem proxy_set_header Remote_Addr $remote_addr; proxy_set_header X-Real-IP $remote_addr Proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; client_max_body_size 200m; proxy_connect_timeout 18000; proxy_send_timeout 18000; proxy_read_timeout 18000;} so far, I believe you have a deeper understanding of "nginx front and back end separation to solve cross-domain problems". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.