nginx解决跨域问题

青旅半醒 2023-01-17 09:22 157阅读 0赞

跨域问题，是因为浏览器同源策略，页面从一个域发起另一个域的异步ajax请求时，不被认可导致。

如果我们的请求在一个域里面，那么浏览器就会认为是安全的，就不会造成跨域，而nginx服务器非常擅长做这个代理工作。虽然是两个域上的请求，但是，我们可以利用nginx，将本域的部分请求转发到另一个域上，就解决了跨域，所有的请求都在一个域里面，浏览器自然认可。

以前，通过服务端解决跨域问题的时候，都是两个域的请求，比如页面是http://localhost/ajax-cors.html，而ajax异步请求是另一个域：http://localhost:8080/ajaxcors/test，服务端设置之后，跨域问题得到解决。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

现在通过nginx反向代理，所有的请求都变成了一个域的请求，只不过我们根据url的不同，将某些请求转发到别的域。

示例：

springboot做ajax请求接口服务端：

maven依赖：

<parent>
    	  	<groupId>org.springframework.boot</groupId>
    	  	<artifactId>spring-boot-starter-parent</artifactId>
    	  	<version>2.1.4.RELEASE</version>
      </parent>
      <dependencies>
        <dependency>
        	<groupId>org.springframework.boot</groupId>
        	<artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
    	    <groupId>com.alibaba</groupId>
    	    <artifactId>fastjson</artifactId>
    	    <version>1.2.58</version>
    	</dependency>
      </dependencies>

请求接口controller类：

package com.xxx.springboot.web;
    import java.util.HashMap;
    import java.util.Map;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import com.alibaba.fastjson.JSONObject;
    @RestController
    @RequestMapping("/ajaxcors")
    public class AjaxCorsController {
    	@GetMapping("/test")
    	public Map<String, Object> test(){
    		Map<String, Object> map = new HashMap<String, Object>();
    		map.put("code", 200);
    		JSONObject json = new JSONObject();
    		json.put("id", 102);
    		json.put("name", "buejee");
    		json.put("age", 18);
    		map.put("data", json);
    		return map;
    	}
    }

application-dev.yml 这里配置一个服务上下文路径，用来区分静态页面的前缀。

server:
      servlet:
        contextPath: /app

nginx页面与配置

ajax-cors.html

<!doctype html>
    <html>
    	<head>
    		<meta charset="UTF-8"/>
    		<title>ajax</title>
    		<style>
    			#root input{padding:10px;border:1px solid #ddd;color:#fff;border-radius: 3px;background: lightgreen;font-size: 16px;}
    			#root .box{padding:5px;}
    			#root textarea{width:790px;height:100px;resize: none;}
    		</style>
    	</head>
    	<body>
    		<div id="root">
    			<div class="box">
    				<input type="button" value="ajax-cors" onclick="handleclick()"/>
    			</div>
    			<div class="box">
    				<input type="button" value="ajax-cors-springboot" onclick="handleclick2()"/>
    			</div>
    			<div class="box">
    				<textarea id="output"></textarea>
    			</div>
    		</div>
    		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    		<script>
    			var base_url = "http://localhost:3000";
    			function handleclick(){
    				$.ajax({
    					url:base_url+"/koa/test",
    					type:"get",
    					success:function(data){
    						$("#output").val(JSON.stringify(data))
    					},
    					error:function(xhr,textStatus,errorThrown){
    						$("#output").val(textStatus)
    					}
    				})
    			}
    			
    			function handleclick2(){
    				$.ajax({
    					url:"/app/ajaxcors/test",
    					type:"get",
    					success:function(data){
    						$("#output").val(JSON.stringify(data))
    					},
    					error:function(xhr,textStatus,errorThrown){
    						$("#output").val(textStatus)
    					}
    				})
    			}
    		</script>
    	</body>
    </html>

nginx.conf

worker_processes  1;
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
        keepalive_timeout  65;
    	
    	upstream springboot{
    	  server localhost:8080;
    	}
    	
        server {
            listen       80;
            server_name  localhost;
    
            location ~ \.html$ {
                root   F:/jsonp/nginx;
                index  index.html index.htm;
            }
    		
    		location ~ /app/* {
                proxy_pass	http://springboot;
            }
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
    
        }
    
    }

核心配置在于区分html页面和/app请求前缀的异步请求，他们是两个域的请求。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

把两个域通过nginx反向代理，变为一个域，成功解决跨域问题。在无法修改服务端代码的前提下，通过nginx解决跨域问题是最理想的方式，这里我们准备的示例，都是自己玩的，实际开发中，很多可能与三方合作，我们这时候不可能要求三方去改动他们的服务端代码，只能是想办法克服不同域的问题。

上面的这种办法解决跨域问题，也叫调用方隐藏跨域，就是本来是两个域，最后通过更改请求的路径，让他们各自分发到对应的服务上。

nginx还有一种解决跨域问题的办法，就是利用nginx的反向代理，将请求服务端接口做一次转发，然后类似服务端解决跨域一样，添加一些响应请求头。

nginx配置如下：

server {
    	listen 80;
    	server_name b.com;
    	
    	location /{
    		proxy_pass http://localhost:8080;
    		add_header Access-Control-Allow-Methods *;
    		add_header Access-Control-Max-Age 3600;
    		add_header Access-Control-Allow-Credentials true;
    		add_header Access-Control-Allow-Origin $http_origin;
    		add_header Access-Control-Allow-Headers $http_access_control_request_headers;
    		if ($request_method = OPTIONS){
    		  return 200;
    		}
    	}
    }

这里，为了配合nginx，还需要修改主机映射，增加：

127.0.0.1    b.com

请求页面地址，还是http://localhost/ajax-cors.html，只不过异步ajax请求地址需要做一个简单的变更， 请求URL变为http://b.com/ajaxcors/test，这样才能经过nginx作转发，并添加请求响应头。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20221021/eae2bd1a334c418299285149f08f5aec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: /images/20221021/f41b8c475a9345248d94ed0774d046b0.png