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

一.什么是跨域

 

当两个域具有相同的协议(如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包

先clean一下 再packge打包  将打好的war包放到Tomcat的 wabapp目录下  然后通过命令启动tomcat

 

 

listen:表示当前的代理服务器监听的端口,默认的是监听80端口。注意,如果我们配置了多个server,这个listen要配置不一样,不然就不能确定转到哪里去了。

server_name:表示监听到之后需要转到哪里去,这时我们直接转到本地,这时是直接到nginx文件夹内。

location:表示匹配的路径,这时配置了/表示所有请求都被匹配到这里

root:里面配置了root这时表示当匹配这个请求的路径时,将会在这个文件夹内寻找相应的文件

index:当没有指定主页时,默认会选择这个指定的文件,它可以有多个,并按顺序来加载,如果第一个不存在,则找第二个,依此类推。

最终效果:

 

 

搭建视频和跨域封装类,我的百度网盘地址:

链接:https://pan.baidu.com/s/1SnlFgXGFSqBSqagiB5VaGQ 

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

听风动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值