nginx跨域实践

最新推荐文章于 2024-08-27 09:55:34 发布

浮华丿背后

最新推荐文章于 2024-08-27 09:55:34 发布

阅读量223

点赞数

分类专栏： nginx

本文链接：https://blog.csdn.net/mingmin1234/article/details/79134326

版权

nginx 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

随着前后端分离及SOA架构逐渐流行，跨域问题也愈来愈受到重视并出现了很多解决方案。

传统的jsonp有以下缺点：1 并不是任何官方标准 2 不支持POST请求 3 存在安全漏洞。相比之下使用nginx解决跨域可以很好的规避上面的问题。

nginx解决跨域问题的思路很简单，配置出一个虚拟路径并对这个路径进行拦截，一旦匹配成功就转发到目标地址，由于虚拟路径和当前服务对应的的是同一域名下的不同文件夹，所以不存在跨域的问题。

下面进行演示：下载最新版nginx，笔者使用的是nginx-1.12.2，修改配置文件/config/nginx.conf,这里模拟前后端分离的场景，使用nginx作为前端项目的server，观察server下的location配置，可以发现nginx默认的访问文件的位置为/html，root代表根目录 index代表默认访问的文件：

location / {
            root   html;
            index  index.html index.htm;
        }

在/html文件夹下新建test.htm,用于向后端发起请求，内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://manage.taotao.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	alert($);
	$(function() {
		$.ajax({
			type : "GET",
			url : "http://manage.taotao.com/jsonp.jsp",//方式1
			//url : "/proxy/html/jsonp.jsp",//方式2
			dataType : "json",
			success:function(data){
				alert(data.abc);
			}
		});
	});
</script>
</head>
<body>

</body>
</html>

修改nginx的配置文件，但是我们想使用域名的形式进项访问，所以需要修改本机的hosts文件:加入以下配置

127.0.0.1 www.quixmart.com #前端域名
127.0.0.1 manage.taotao.com #后端域名

这样当在浏览器输入域名时，默认访问的是本机地址，完成以后nginx做如下修改：

将server_name修改为前端指定的域名，使前端项目可以直接通过域名访问，加入新的server配置使后端项目也能直接通过域名访问：

server {
        listen       80;
        server_name  manage.taotao.com;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        location / {
            proxy_pass http://127.0.0.1:8081;
            proxy_connect_timeout 600s;
            proxy_read_timeout 600s;
        }
    }

下面新建后端项目：使用mave构建demo项目，pom文件内容

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.example</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<dependencies>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>	
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.1</version>
				<configuration>
					<!-- jdk配置为1.8 -->
					<source>1.8</source>
					<target>1.8</target>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<configuration>
					<port>8081</port>
					<path>/</path>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

需要使用servlet的依赖，并使用maven提供的tomcat插件启动项目。

建立对应的目录及文件：

jsonp.jsp(为了和jsonp的方式进行比较)：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String callback = request.getParameter("callback");
	if (null == callback) {
		out.print("{\"abc\":123}");
	} else {
		out.print(callback + "({\"abc\":123})");
	}
%>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>demo</display-name>
</web-app>

配置tomcat插件的build

bebug启动项目以后，再启动nginx，出现以下页面表示nginx服务正常启动：

后台页面正常启动后的访问结果：

下面测试跨域问题：当输入URL：http://www.quixmart.com/test.htm时会访问test.htm并向后端发起ajax请求：

出现以下页面表示使用script标签的src属性加载js成功，F12进入debug，点击确定以后出现跨域错误：

下面在nginx.conf中配置虚拟路径解决跨域：在默认的location下再添加一个location的配置

其中location后面指定的参数"^~/proxy/html/"是需要拦截路径，匹配成功会停止向下搜索。rewrite后面的第一个参数"^/proxy/html/(.*)$"是需要重写的路径，第二个参数"/$1"是重写后的路径，$1代表正则中的第一个()。break表示匹配成功停止向下搜索。proxy_pass:请求代理到其他主机

以http://www.quixmart.com/proxy/html/jsonp.jsp为例：经过拦截后最终的访问地址为：http://manage.taotao.com/jsonp.jsp。调整test.htm中ajax请求的url，改为方式2通过虚拟路径进行访问，重启nginx，再次访问test.htm,效果如下