本文将基于windows，使用Nginx实现跨域访问功能。
注：本文基于前述基础知识，如需要查看，请点这里
1.什么是跨域访问？
协议、域名、子域名、端口至少有一个不一样，则是不同域，否则是同域。示例如下：
（1）http://www.gupao.com 和 https://www.gupao.com 不同域，协议不同
（2）http://www.gupao.com 和 http://www.gupao.net 不同域，域名不同
（3）http://gper.gupao.com 和 http://bbs.gupao.com 不同域，子域名不同
（4）http://www.gupao.com:2673 和 http://www.gupao.com:2674 不同域，端口不同
（5）http://www.gupao.com/index 和 http://www.gupao.com/bbs 同域
2.浏览器同源策略
当我们在浏览器里访问一个域，不允许它跟另一个域的脚本进行交互。
主要是基于安全考虑，不允许web端同时访问不同的域（服务端）。
3.通过Nginx代理实现跨域访问（方法一）
原理：使用nginx同时代理 server1和server2，则对于浏览器来说，它只访问了一个地址（nginx服务器的地址），会认为是同一个域，从而实现跨域访问。
（1）nginx.conf配置如下：
server{
listen 8060;
server_name localhost;
当访问/user/csrf 时，去到8062端口
location /user/csrf {
proxy_pass http://localhost:8062;
}
非访问/user/csrf 时，去到8061端口
location / {
proxy_pass http://localhost:8061;
}
}
说明：修改配置后，需要执行 nginx -s reload
（2）csrf.html 示例如下（本示例基于thymeleaf）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>this is the csrf file</title>
<link rel="icon" href="https://www.gupaoedu.cn/favorite.ico"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
console.log("here")
$.ajax({
url:"http://localhost:8060/user/100",
type:"GET",
success:function(data){
alert("success!!跨域成功！");
},
error:function(){
alert("fail!!!跨域失败！");
}
});
})
</script>
<body>
</body>
</html>
（3）controller示例如下：
package com.imooc.web.controller;
import com.fasterxml.jackson.annotation.JsonView;
import com.imooc.dto.User;
import com.sun.javafx.UnmodifiableArrayList;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import sun.misc.Request;
import javax.jws.soap.SOAPBinding;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/user")
public class UserController {
/**
* @author linkang
* @time 2022-09-28
* @desc 获取用户信息
* @param id 用户id
*/
@RequestMapping(value = "/{id}",method = RequestMethod.GET)
@JsonView(User.userSimpleView.class)
public User getInfo(@PathVariable String id ){
User user =new User();
user.setUsername(id+"-"+Math.random());
user.setPassword("1234");
System.out.println("##############here:"+id);
return user;
}
/**
* @author linkang
* @time 2022-09-28
* @desc csrf跨域访问示例
*
*/
@RequestMapping("/csrf")
public ModelAndView getCsrf(){
return new ModelAndView("csrf");
}
}
（4）启动模拟服务器并验证
通过修改springboot工程的application.properties的server.port，分别启动8061、8062模拟两台服务器，并分别测试验证下述网址能正常打开：
http://localhost:8061\user\100
http://localhost:8062\user\100
（5）验证nginx配置
使用浏览器打开下述地址，如果正常访问，表示配置正确：
http://localhost:8060/user/csrf
4.通过Nginx代理实现跨域访问（方法二）
原理：通过使用Nginx代理ajax访问的目标服务器时，在header中添加'Access-Control-Allow-Origin' http://localhost:8062、'Access-Control-Allow-Credentials' true 等信息，使浏览器认为该目标服务器（8061）允许指定服务器（8062）跨域访问，从而放行。
（1）nginx.conf配置如下：
server{
listen 8060;
server_name localhost;
location / {
add_header 'Access-Control-Allow-Origin' http://localhost:8062;
add_header 'Access-Control-Allow-Credentials' true;
add_header 'Access-Control-Allow-Headers' *;
add_header 'Access-Control-Allow-Methods' *;
add_header 'Access-Control-Expose-Headers' *;
proxy_pass http://localhost:8061;
}
}
（2）csrf.html 写法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>this is the csrf file</title>
<link rel="icon" href="https://www.gupaoedu.cn/favorite.ico"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
console.log("here")
$.ajax({
url:"http://localhost:8060/user/100",
type:"GET",
success:function(data){
alert("success!!跨域成功！");
},
error:function(){
alert("fail!!!跨域失败！");
}
});
})
</script>
<body>
</body>
</html>
（3）controller示例如下：
package com.imooc.web.controller;
import com.fasterxml.jackson.annotation.JsonView;
import com.imooc.dto.User;
import com.sun.javafx.UnmodifiableArrayList;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import sun.misc.Request;
import javax.jws.soap.SOAPBinding;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/user")
public class UserController {
/**
* @author linkang
* @time 2022-09-28
* @desc 获取用户信息
* @param id 用户id
*/
@RequestMapping(value = "/{id}",method = RequestMethod.GET)
@JsonView(User.userSimpleView.class)
public User getInfo(@PathVariable String id ){
User user =new User();
user.setUsername(id+"-"+Math.random());
user.setPassword("1234");
System.out.println("##############here:"+id);
return user;
}
/**
* @author linkang
* @time 2022-09-28
* @desc csrf跨域访问示例
*
*/
@RequestMapping("/csrf")
public ModelAndView getCsrf(){
return new ModelAndView("csrf");
}
}
版权归原作者 xiaokang2216 所有， 如有侵权，请联系我们删除。