互联网架构-Nginx与高可用实战-049：基于Nginx实现解决网站跨域问题

最新推荐文章于 2024-07-08 23:41:02 发布
最新推荐文章于 2024-07-08 23:41:02 发布
阅读量202 收藏
点赞数
分类专栏： 蚂蚁课堂第5期视频笔记 文章标签： java nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012425860/article/details/112838463
版权

049：基于Nginx实现解决网站跨域问题

1 在Linux服务器上安装Nginx服务器

课程内容：
1、在Linux环境上安装Nginx需要注意的事项
2、实际项目中网站跨域产生的背景
3、史上最全的网站跨域问题解决方案
4、基于Nginx实现解决网站跨域问题
5、root、alias指令区别

Linux环境Nginx安装
1.安装gcc gcc-c++(如新环境,未安装请先安装)

$ yum install -y gcc gcc-c++

2.安装wget

$ yum -y install wget

3.安装PCRE库

$ cd /usr/local/
$ wget http://jaist.dl.sourceforge.net/project/pcre/pcre/8.33/pcre-8.33.tar.gz
$ tar -zxvf pcre-8.33.tar.gz
$ cd pcre-8.33
$ ./configure
$ make && make install

4.安装SSL库

$ yum install openssl
$ yum update openssl

5.安装zlib库

$ cd /usr/local/
$ wget http://zlib.net/zlib-1.2.11.tar.gz
$ tar -zxvf zlib-1.2.11.tar.gz
$ cd zlib-1.2.11
$ ./configure
$ make && make install

6.安装nginx

$ cd /usr/local/
$ wget http://nginx.org/download/nginx-1.8.0.tar.gz
$ tar -zxvf nginx-1.8.0.tar.gz
$ cd nginx-1.8.0 
$ ./configure
$ make && make install

7.启动nginx

/usr/local/nginx/sbin/nginx

测试启动nginx成功
在这里插入图片描述

2 Nginx root、alias指令区别

root 、alias指令区别
alias是一个目录别名的定义，root则是最上层目录的定义。
有一个重要的区别是alias后面必须要用“/”结束，否则会找不到文件，而root则可有可无。

查找nginx应用
ps -aux | grep ‘nginx’
关闭防火墙
systemctl stop firewalld
停止nginx
/usr/local/nginx/sbin/nginx -s stop

测试alias效果：
在这里插入图片描述

3 Nginx快速回顾实现反向代理技术

在这里插入图片描述

4 实际项目中跨域问题产生的背景

什么是跨域的问题
当浏览器请求中访问页面时，如果当前页面中的ajax域名和端口号与当前页面访问的请求域名和端口号都不一致的情况下，浏览器有自我保护机制，能够访问到该请求但是无法获取结果集。
跨域问题的遇到场景
实际开发中前后端分离

模拟网站跨域问题
A项目

@Controller
@SpringBootApplication
public class AIndexController {

    @ResponseBody
    @RequestMapping("/")
    public String index() {
        return "蚂蚁课堂A项目";
    }

    @RequestMapping("/aIndexJsp")
    public String aIndexJsp() {
        return "aIndexJsp";
    }
    public static void main(String[] args) {
        SpringApplication.run(AIndexController.class, args);
    }

}

server:
  port: 8080
spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript"
   src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
      $.ajax({
         type : "POST",
         async : false,
         url : "http://127.0.0.1:8081/getBInfo",
         dataType : "json",
         success : function(data) {
            alert(data["retCode"]);
         },
         error : function() {
            alert('fail');
         }
      });
   });
</script>
</head>
<body>A项目正在调用B项目
</body>
</html>

B项目

@RestController
@SpringBootApplication
public class BIndexController {

    @RequestMapping("/")
    public String index() {
        return "我是B项目";
    }

    //该接口提供给A项目进行ajax调用
    @RequestMapping("/getBInfo")
    public Map<String, Object> getBInfo(HttpServletResponse response) {
        System.out.println(">>>>>>B项目getBInfo>>>>>>");
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("retCode", "200");
        result.put("retMsg", "登陆成功");
        return result;
    }
        public static void main(String[] args) {
        SpringApplication.run(BIndexController.class, args);
    }
}

server:
  port: 8081

运行结果：
在这里插入图片描述

5 基于JSONP解决项目中跨域问题

网站跨域的问题如何实现解决
1.服务端设置响应允许跨域；
2.使用jsonp实现解决 缺点：只能够发送get请求；模拟script提交参数；
3.基于Nginx实现统一接口的域名和端口号；
4.使用微服务中的网关解决跨域问题；
5.使用HttpClient实现转发，和nginx反向代理原理一样；

1.服务端设置响应允许跨域

@RequestMapping("/getBInfo")
public Map<String, Object> getBInfo(HttpServletResponse response) {
    System.out.println(">>>>>>B项目getBInfo>>>>>>");
    // 告诉客户端（浏览器）允许跨域访问 *表示所有域名都是可以 在公司中正常的代码应该放入在过滤器中
    // 小项目合适 Aop/过滤器 响应头设置允许跨域解决代码重复问题
    response.setHeader("Access-Control-Allow-Origin", "*");
    Map<String, Object> result = new HashMap<String, Object>();
    result.put("retCode", "200");
    result.put("retMsg", "登陆成功");
    return result;
}

2.使用jsonp实现解决
A项目Ajax相关配置

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "post",
            async: false,
            url: "http://api.mayikt.com/b/getBInfo?callback=",
            dataType: "jsonp",
            jsonp: "jsonpCallback",
            jsonpCallback: "callback",
            success: function (data) {
                alert(data["retMsg"]);
            },
            error: function (msg) {
                alert(msg.toString());
            }
        });
    });
</script>

B项目服务端

// 使用jsonp 解决跨域问题
@RequestMapping("/getBInfo")
public void getBInfo(HttpServletResponse response, String jsonpCallback)
        throws IOException {
    JSONObject result = new JSONObject();
    result.put("retCode", "200");
    result.put("retMsg", "登陆成功");
    PrintWriter writer = response.getWriter();
    writer.println(jsonpCallback + "(" + result.toJSONString() + ")");
    writer.close();
    // 127.0.0.1:8081?jsonpCallback=256163154
    // B项目返回结果集 256163154(jsonObject)
}

测试结果：
在这里插入图片描述

6 使用HttpClient实现转发请求解决跨域

3.使用HttpClient实现转发

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            async: false,
            url: "http://127.0.0.1:8080/forWardB",
            dataType: "json",
            success: function (data) {
                alert(data["retCode"]);
            },
            error: function () {
                alert('fail');
            }
        });

    });
</script>

// 使用HttpClient进行方法B接口
@RequestMapping("/forWardB")
@ResponseBody
public JSONObject forWardB() {
    // 中间采用rpc httpClient技术调用接口。服务器与服务器之间不存在跨域问题
    JSONObject result = HttpClientUtils.httpGet("http://127.0.0.1:8081/getBInfo");
    return result;
}

测试结果：
在这里插入图片描述

7 基于Nginx构建微服务网关解决跨域

大型互联网公司解决跨域问题，使用Nginx实现网关或者使用微服务网关

4.使用Nginx搭建网关
保持域名相同，根据项目名称不同实现转发
在这里插入图片描述
本地hosts文件增加 192.168.0.50 api.mayikt.com
192.168.0.50为虚拟机ip，192.168.43.179为本机ip
Nginx搭建网关测试结果
在这里插入图片描述

竞风之翼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Access-Control-Allow-Origin跨域问题，使用Nginx配置来解决
m0_52789121的博客
09-09 5235
以上就是今天要讲的内容，本文仅仅简单介绍了用nginx来解决Access-Control-Allow-Origin跨域问题；深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Nginx跨域设置Access-Control-Allow-Origin无效的解决办法
09-30
在Web开发中，由于浏览器的同源策略限制，不同源的资源之间无法直接进行交互，这就是所谓的跨域问题。为了克服这一限制，开发者通常会利用HTTP头部的`Access-Control-Allow-Origin`字段来允许特定或所有来源的请求。...
Springboot解决跨域问题方案总结(包括Nginx，Gateway网关等)
热门推荐
qq_35716689的博客
03-23 16万+
跨域问题是浏览器为了保护用户的信息安全，实施了同源策略（Same-Origin Policy），即只允许页面请求同源（相同协议、域名和端口）的资源，当 JavaScript 发起的请求跨越了同源策略，即请求的目标与当前页面的域名、端口、协议不一致时，浏览器会阻止请求的发送或接收。
Nginx：关于实现跨域代理
最新发布
jclee95的个人博客
07-08 1728
本文讨论Nginx实现跨域代理相关话题。
Nginx实战系列-玩转高性能Nginx服务器经典案例实战
二当家小D的学习资源库
06-25 971
简介 自定义日志格式，统计接口响应耗时日志格式增加从接受用户请求的第一个字节到发送完响应数据的时间，即包括接收请求数据时间、程序响应时间、输出响应数据时间$upstream_response_time：指从Nginx向后端建立连接开始到接受完数据然后关闭连接为止的时间$request_time一般会比upstream_response_time大，因为用户网络较差，或者传递数据较大时，前者会耗时大很多配置自定义日志格式server {listen 80;
nginx代理-解决CORS跨域问题: Access to XMLHttpRequest at XXX from XXX
pingzhuyan的博客
04-06 1642
先看报错信息:address=&key=&get_poi=*’ from origin ‘https://域名’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
解决跨域问题！Nginx代理与Vue-cli代理处理跨域问题
黄政的博客
04-18 3191
解决跨域问题！Nginx代理与Vue-cli代理处理跨域问题前言业务场景两种跨域解决方法解决原理Ngnix代理vue-cli写在最后 前言 我是一个java后端程序员，之前解决跨域都是在后端写一个过滤器，给HttpRequest的header添加都头信息。但是入职公司后线上服务器是通过配置nginx代理来解决跨域的，所以我再写个过滤器是多余。 现在都是前后端分离，为了更好的接口测试，让前端项目在我...
nginx代理解决跨域问题
呼啦啦啦啦啦的博客
03-27 6808
跨域（Cross-Origin）是指在 Web 开发中，一个网页的运行脚本试图访问另一个网页的资源时，这两个网页的域名、协议或端口号任何一个不同，就被称为跨域。跨域是由浏览器的同源策略（Same-Origin Policy）所限制的。同源策略是一种安全机制，它防止一个网页的脚本去读取另一个不同域名的网页内容。同源策略要求两个网页的协议、主机和端口号必须完全相同，否则就会出现跨域问题。简单来说，同源策略要求不同域名的网页之间不能相互访问对方的资源。
Nginx 轻松解决跨域问题
leonnew的博客
04-01 1万+
当你遇到跨域问题，不要立刻就选择复制去尝试。请详细看完这篇文章再处理 。我相信它能帮到你。 # 分析前准备： 前端网站地址：http://localhost:8080 服务端网址：http://localhost:59200 首先保证服务端是没有处理跨域的，其次，先用postman测试服务端接口是正常的 当网站8080去访问服务端接口时，就产生了跨域问题，那么如何解决？接下来我把跨域遇到的各种情况都列举出来并通过nginx代理的方式解决（后台也是一样的，只要你理解的原理）。 跨.
nginx 解决跨域问题
qq_33240556的博客
04-23 762
上述配置中，设置了CORS响应头部，允许来自任何源的请求（'*'表示任意源，也可以替换为具体的域名），并且指定了允许的方法和请求头。在前后端分离的开发架构中，跨域问题时常发生，特别是浏览器出于安全原因实施的同源策略限制了不同源的网页间相互交互的能力。当前端应用（如：localhost:8080）需要访问后端服务（如：localhost:59200）时，可以通过Nginx配置反向代理，使两者看起来像是同一个源，从而规避浏览器的同源策略限制。允许所有源时可能存在安全风险，实际部署时应尽量精确控制允许的源列表。
Nginx - 一招快速解决跨域（CORS）问题
牧码的博客
08-19 2628
Nginx - 一招快速解决跨域（CORS）问题
使用nginx做为http-flv服务如何解决跨域问题
xiaoluer的专栏
04-15 4995
什么是跨域 跨域是指浏览器的同源策略限制，这个策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。如果一个请求url的协议、域名、端口三者之间任意一个与当前页面的url不同即为跨域。 如下图所示即为跨域时的报错： 使用nginx搭建http-flv服务 主要使用了nginx和nginx-http-flv-module模块，具体过程可参考：https://blog.cs...
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
09-09
Nginx配置跨域请求Access-Control-Allow-Origin * 是解决现代Web应用中常见问题的一个关键步骤。在Web开发中，由于浏览器的同源策略限制，不同源的网站之间不能直接进行AJAX请求，除非服务器允许这样的跨域行为。...
nginx服务器配置解决ajax的跨域问题
09-30
总结来说，解决Ajax跨域问题的关键在于设置合适的响应头，而在Nginx服务器上实现这一目标需要对`nginx.conf`或相关站点配置文件进行编辑，添加适当的`add_header`指令。正确配置后，Nginx将允许来自不同源的Ajax请求...
nginx跨域问题，解决多端口，多ip问题
03-26
Nginx 跨域问题解决方案 Nginx 是一个流行的开源 Web 服务器软件，广泛应用于 Web 服务器管理。然而，在使用 Nginx 进行服务器管理时，经常会遇到跨域问题。跨域问题是指在不同的域名、端口或协议下，无法访问...
互联网架构-SpringMVC源码深度解析-027：Servlet与SpringMVC关系
枫火的博客
12-12 833
027：Servlet与SpringMVC关系1 SpringMVC深度源码分析课程介绍2 基于ide构建ServletMaven工程3 如何证明Servlet线程是否安全4 ServletContainerInitializer用法5 基于注解方式构建SpringMVC框架6 使用注解形式启动SpringMVC项目7 SpringServletContainerInitializer源码分析 1 SpringMVC深度源码分析课程介绍 课题内容： 1.Servlet与SpringMVC之间的关系 2.Se
互联网架构-精讲设计模式-010：深入理解单例模式
枫火的博客
11-20 784
010：深入理解单例模式1 饿汉式模式2 懒汉式模式(线程不安全)3 双重检验锁原理4 静态内部类方式5 使用反射技术破解单例6 使用序列化破解单例7 枚举方式防止破解 1 饿汉式模式 课程内容: 1、什么是单例模式？单例的应用场景 2、完全解密单例的七种写法 3、如何去破解一个单例，创建多次 4、如何防止反射、序列化破解单例 什么是单例模式 单例模式确保一个类只有一个实例，并提供一个全局访问点，实现单例模式的方法是私有化构造函数，通过getInstance()方法实例化对象，并返回这个实例。 单例模式优缺
互联网架构-Spring5.0源码深度解析-020：Spring核心注解
枫火的博客
11-28 718
020：Spring核心注解1 常用注解源码分析课程安排2 @Condition条件注册bean使用3 @Import注解与@Bean注解区别4 @EnableXXX功能性注解实现原理5 使用实现ImportSelector注册bean6 使用ImportBeanDefinitionRegistrar注册bean7 使用FactoryBean注册对象8 @Service与@Compent注解区别 1 常用注解源码分析课程安排 课程内容: 1、使用@Condition多条件注册bean对象 2、@Import
互联网架构-精讲设计模式-001：策略模式
枫火的博客
11-16 672
1 设计模式课程相关说明 为什么需要使用设计模式 使用设计模式可以重构整体架构代码、提高代码复用性、扩展性、减少代码冗余问题。 Java高级工程师必备的技能！ 什么时候需要使用到设计模式重构呢？ 实现代码重构的肯定是整体的骨架，如四期项目-聚合支付平台，写一些框架。 2 为什么需要使用策略模式 课程内容: 1、什么是策略模式？ 2、什么场景使用策略模式 3、为什么命名为策略模式 4、上下文与策略模式关系 5、基于枚举+工厂实现策略模式 6、基于数据库方式实现策略模式 7、Spring框架中那些地方使用到策略
Nginx配置与应用实战：从入门到高可用
适用于高并发场景，能实现网关接口跨域、防盗链、防止DDoS攻击，以及通过keepalived实现高可用性。此外，Nginx还提供了Session共享解决方案，确保用户会话在集群中的无缝切换。在Windows下，安装只需解压并运行nginx...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值