• notice
  • Congratulations on the launch of the Sought Tech site

Nginx configuration cross domain (CORS)

1 What is a cross-domain request

A cross-domain request means that the domain where the request is currently initiated is different from the domain where the resource pointed to by the request is located. The domain here refers to such a concept: we think that if the protocol + domain name + port number are the same, then it is the same domain.

For example: if a website with a domain name of aaa.cn initiates an Ajax request with a resource path of aaa.cn/books/getBookInfo, then the request is in the same domain, because the protocol, domain name and port number of the resource path are the same as The current domain is the same (in the example, the default protocol name is http, and the default port number is 80). However, if an Ajax request with a resource path of bbb.com/pay/purchase is initiated, then the request is a cross-domain request, because the domains are inconsistent, and at the same time, due to security issues, this request will be restricted by the same-origin policy.

2. Common cross-domain situations

  • Different network protocols, such as http protocol access https protocol;

  • Different ports, such as port 80 to access port 8080;

  • Different domain names, such as www.test1.com visit www.test2.com;

  • Different subdomains, such as abc.test1.com access def.test1.com;

3  nginx cross-domain example demonstration

Prepare an nginx server, configured as

server {
      listen 80; # Listening port
       server_name www.zwx.com; # Domain name or ip
      location / { # Access path configuration   
      root /usr/share/nginx/html; # Root directory
      index index.html index.htm; # Default home page
      }
      error_page 500 502 503 504 /50x.html; # Error page
      location = /50x.html {
      root html;
      }
}

There is a wel.html file in the html directory

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nginx-cors-test</title>
</head>
<body>
<div>nginx cross-domain request test</div>

</body>

</html>

Then start a springboot application, or tomcat can also access an html page

wel1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nginx-cors-test</title>
</head>
<body>
<button type="button" onclick="test()">nginx cross-domain request test</button>
<div id="test"></div>
</body>
<script src="jquery-1.10.2.min.js"></script>
<script>
    function test() {
        $.get("http://192.168.75.128/wel.html",null,function(result) {
            alert("Cross domain request succeeded");
        });
    }

</script>
</html>

Then visit localhost:9000/wel1.html


Click the test button


A cross-domain access error occurred

4 Modify the nginx server configuration

Add the following

server {
      listen 80; # listen port
       server_name localhost; # domain name or ip
      location / { # access path configuration
  #Domains that allow cross-domain requests, * represents all
      add_header 'Access-Control-Allow-Origin' *;
      #Allow requests with cookies
      add_header 'Access-Control-Allow-Credentials' 'true';
      #Methods that allow requests, such as GET/POST/PUT/DELETE
      add_header 'Access-Control-Allow-Methods' *;
      # allow request headers
      add_header 'Access-Control-Allow-Headers' *;
      root /usr/share/nginx/html;# root directory
      index index.html index.htm; # default homepage
      }
      error_page 500 502 503 504 /50x.html; # error page
      location = /50x.html {
      root html;
      }
}

Then restart nginx and test again


Cross-domain search succeeded

The most important thing is to add the following configuration to the cross-domain nginx configuration

      #Domains that allow cross-domain requests, * represents all
      add_header 'Access-Control-Allow-Origin' *; #Allow
      requests with cookies
      add_header 'Access-Control-Allow-Credentials' 'true'; #Methods
      that allow requests, such as GET/POST/PUT/DELETE
      add_header 'Access-Control-Allow-Methods' *;
      # headers that allow requests
      add_header 'Access-Control-Allow-Headers' *;


Tags

Technical otaku

Sought technology together

Related Topic

1 Comments

author

lipitor 20mg brand & lt;a href="https://lipiws.top/"& gt;brand atorvastatin 10mg& lt;/a& gt; lipitor 20mg price

Hkcrep

2024-03-09

Leave a Reply

+