跨域技术+Nginx项目部署+Nginx实现负载均衡

关注

原创最新推荐文章于 2026-04-03 09:29:20 发布 703 阅读 AI 写同款· GEO 优化 ›

nginx反向代理、负载均衡、跨域问题 nginx的应用场景 1、http服务器：Nginx是一个http服务器，可以独立提供http服务。可以作为静态网页服务器。 2、虚拟主机：可以实现一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。 3、反向代理：当网站的访问量达到一定程度后，单台主机不能满足用户的请求时，需要用多台服务器集群可以使用Nginx做反向代理。 4、负载均衡：并且多台服务器可以平均分担负载，不会因为某台服务器负载高... 阅读详情

一.什么是跨域

当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.google.com)，那么我们就可以认为它们是相同的域（协议，域名，端口都必须相同）。

跨域就指着协议，域名，端口不一致，出于安全考虑，跨域的资源之间是无法交互的(例如一般情况跨域的JavaScript无法交互，当然有很多解决跨域的方案)

（浏览器的同源安全策略

没错，就是这家伙干的，浏览器只允许请求当前域的资源，而对其他域的资源表示不信任。那怎么才算跨域呢？

请求协议http,https的不同

域domain的不同

端口port的不同）

2.实现跨域访问的方式

1） JSONP :

动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了,而缺点也很明显,它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题

2） NGINX代理 :

通过一个代理服务器,将跨域的请求转发,如:前端JS在http://www.demo.com/a.js,后端是http://www.abc.com/app/action,通过代理可将后端的地址转换成http://www.demo/app/action,这样,从前端发起的请求,就不存在跨域的情况了

3）CORS

然后CORS是支持所有类型的HTTP请求,并且也只是服务端进行设置即可,但是缺点就是老的浏览器不支持CORS(如:IE7,7,8,等)

https://www.jianshu.com/p/89a377c52b48

3.具体实现

前台：

1.jsonp请求

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
  <title>Document</title>
 </head>
 <body>
  <input type="button" onclick="btn()" value="跨域"/>
 </body>
	<script>
		function btn(){
			$.ajax({
				url:'http://192.168.110.128/nginx-demo/test',
				type:'GET',
				data:{},
				dataType:'json',
				success:function(data){
					alert(1)
					alert(data.name)
				}
			})
		}
	</script>
</html>

主要讲下cors怎么实现

1.controller层加上注解

@CrossOrigin(methods = { RequestMethod.GET, RequestMethod.POST }, origins = "*")

2.结合Filter

在启动类上加如下代码，可以直接封装成类：

    @Bean
    public CorsFilter corsFilter() {

        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        final org.springframework.web.cors.CorsConfiguration config = new org.springframework.web.cors.CorsConfiguration();

        config.setAllowCredentials(true); // 允许cookies跨域

        config.addAllowedOrigin("*");// #允许向该服务器提交请求的URI，*表示全部允许，在SpringMVC中，如果设成*，会自动转成当前请求头中的Origin

        config.addAllowedHeader("*");// #允许访问的头信息,*表示全部

        config.setMaxAge(18000L);// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了

        config.addAllowedMethod("OPTIONS");// 允许提交请求的方法，*表示全部允许

        config.addAllowedMethod("HEAD");

        config.addAllowedMethod("GET");// 允许Get的请求方法

        config.addAllowedMethod("PUT");

        config.addAllowedMethod("POST");

        config.addAllowedMethod("DELETE");

        config.addAllowedMethod("PATCH");

        source.registerCorsConfiguration("/**", config);

        return new CorsFilter(source);

    }

二：使用Nginx实现负载均衡：

1使用多个tomcat

2每个tomcat部署相同的项目

3.使用nginx反向代理tomcat

将项目模块打成war包

以下代码粘pom文件

声明war包

<packaging>war</packaging>

禁止本地tomcat启动

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-tomcat</artifactId>
      <scope>provided</scope>
</dependency>

<build>
    <finalName>这里设置打成的war包的名称</finalName>
</build>

2.修改微服

务启动类，继承SpringBootServletInitializer重写configure方法

package com.jk;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

@SpringBootApplication
public class NginxDemoApplication extends SpringBootServletInitializer {

    public static void main(String[] args) {
        SpringApplication.run(NginxDemoApplication.class, args);
    }


    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
        return builder.sources(NginxDemoApplication.class);
    }

}

打包war包