nginx跨域实践
随着前后端分离及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,效果如下
成功弹出结果,并没有任何报错信息,跨域问题得到解决~~
上一篇: mycat的高阶使用
下一篇: js中apply与call简单用法