Detailed explanation of how Nginx solves the problem of cross-domain access to front-end resources

After being tortured by the front-end cross-domain problem for almost 2 days, I finally solved it using ngnx, so I will summarize it here.

This article only discusses how to use Ngnx to solve cross-domain problems, and does not discuss the principles.

1. First, introduce the relevant command operations of Nignx in Windows environment

Common nginx commands:

• Verify that the configuration is correct: nginx -t
• Check the version number of Nginx: nginx -V
• Start Nginx: start nginx
• Quickly stop or shut down Nginx: nginx -s stop
• Stop or shut down Nginx normally: nginx -s quit
• Configuration file modification reload command: nginx -s reload

After stopping nginx, nginx.pid in the /logs directory will be automatically deleted

• You can use the command nginx -c conf/nginx.conf to recreate or restart nginx

Check whether the nignx listening port is started successfully

• netstat -ano | findstr port number

Solution: The port is still listening after closing nignx

1. netstat -ano | findstr port number#Get PID

2. tasklist | findstr "PID" #command to find nginx process information

3. taskkill /f /t /im nginx.exe #End the nginx process

2. Introduce how to configure Nignx to solve cross-domain problems

Front-end IP port number: http://localhost:8080/

Backend IP port number: http://localhost:8082/

Now when we do not set up cross-domain, the front-end request is as follows

uni.request({
  url:'http://localhost:8082/ApiController/test',
  success:(res)=>{
  console.log(res.data)
  },
})

Access address: 'http://localhost:8082/ApiController/test', it will appear

Then we configure Nignx

Edit /config/nginx.conf this file

1) Add header information and add cross-domain access configuration in the http block of the nginx.conf configuration file

add_header Access-Control-Allow-Origin *; //Allow all domain names to access the proxy address across domains add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET; //Cross-domain request access request method,

2) Set up a reverse proxy

server {
  listen 80; #Configure nignx's listening port server_name localhost; #Configure nignx's listening address location /ApiController{ #Listening address starts with /ApiController proxy_pass http://localhost:8082; #Forwarding address}
}

After configuration, our front-end access url

http://localhost:8082/ApiController/test should be changed to http://localhost:80/ApiController/test

#Monitoring at this time

Use localhost as the domain name

Use port 80

The address starts with /ApiController

Address forwarding will be performed

uni.request({
   url:'http://localhost:80/ApiController/test',
   success:(res)=>{
   console.log(res.data)
   },
})

Result: (Access successful)

Summarize

This is the end of this article about how Nginx solves the problem of cross-domain access to front-end resources. For more relevant content about how Nginx solves the problem of cross-domain access to front-end resources, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!