1.前言

　　以前做项目 ，基本上是使用 MVC 模式 ，使得视图与模型绑定 ，前后端地址与端口都一样 ，

但是现在有些需求 ，需要暴露给外网访问 ，那么这就出现了个跨域问题 ，与同源原则冲突，

造成访问失败 ，于是出了个CORS策略 ，

引用官方解释：

　　CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

　　它允许浏览器向跨源服务器，发出ajax请求，从而克服了AJAX只能同源使用的限制。

　　CORS依赖于服务器端的设定，只要在服务器端进行了设置，就可以实现相应的资源访问。

网上找了很多解决方式，有后端方案、有<link>标签方案等，质量参差不齐，甚至直接是转载连测试都不做 ，一时半会让我费解好久。。。

 
 

2.跨域失败根本原因

　　其实所谓的跨域问题 ，仅仅是局限于 前端页面 【脚本或表单】 访问了与该前端 主机地址【包括ip和端口】 不一样的 远程后端接口 ，其实该前端的请求是成功发送到了远程后端 ，
但是因为请求头信息原因 ，远程后端检查出 请求来源的前端页面的主机地址【包括ip和端口】  不是自己的本地 的地址， 因此拒绝了该请求 。
　　因此 ，跨域问题的关键不是前端设置，而是后端设置 ，前端不需要改动 。
　　【后端与后端地址不同是可以相互访问的 ，不存在跨域问题，不然 做 spring cloud 分布式微服务框架岂不是被烦死？== 】

3.解决操作 【适用于spring boot 与 spring MVC】

我准备了两个工程 ，端口5601负责前端  ，端口8001 负责后端
（1）看一下前端源码  ， 前端5601 向端口8001 发送请求，如果直接 发送请求，必然报错 
<!DOCTYPE html>

<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"

      xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>

    <meta charset="UTF-8">

    <title>index</title>

</head>

<body>

你好 ，世界 ，2333

<!--<p>点击 去home.html页面</p>-->

<hr>

<label>

    发送的内容：

    <input id="text" type="text">

</label>

<button onclick="dosome()">点我，发送信息</button>

<hr>

返回的结果：<span id="res"></span>

<!--<link href="/js/jquery-1.11.1.min.js" rel="stylesheet"/>-->

<!--当前路径是/html/**  ,因此需要返回一级 ，所以用  ../js/  -->

<script  src="../js/jquery-1.11.1.min.js" ></script>

<script>

    function dosome() {

        let text = $("#text").val();

        if (text.trim() == "") {

            alert("不能为空");

            return;

        }

        //URL是URI的子集，所有的URL都是URI，但不是每个URI都是URL，还有可能是URN。

        let url = "http://localhost:8001/getname";

        $.ajax({

            async: true,

            type: 'post',

            data: {"name": text},

            //这里类型是json，那么跨域的后端需要是map类型、po实体类等 json类型 才能接收数据

            dataType: "json",

            url: url,

            success: function (data) {

                console.log(data);

                //请求成功回调函数

                if (data != null) {

                    // alert("有数据返回")

                    $("#res").html(JSON.stringify(data))

                } else {

                    alert("系统异常")

                }

            }

        });

    }

</script>

</body>

</html>

（2）后端该怎么写呢？

其实很简单

如果是spring boot ，直接使用 注解@CrossOrigin即可

如果是 springMVC 则使用 设置响应头 即可 ，当然，spring boot 也是兼容这个方法的

源码

【如果项目设置了spring security ，需要其他配置，在我的其他随笔有详细记载】

但是

注意：返回的数据需要与前端对应，否则前端无法获取返回结果

什么意思呢？

比如前端设置的返回数据类型是 json

那么后端要么返回jsonp，要么返回 Map 、List<Map>、po实体类， 不然前端无法识别数据，

比如返回String类型会造成 前端json类型解析不出来

4.测试

启动项目

端口5601 ，访问网址 http://localhost:5601/html/index.html

输入文字 ，点击发送 ，向端口8001 发送请求 ，希望得到处理结果

成功。。。撒花 ！！！

spring boot 解决 跨域 的两种方法 -- 前后端分离的更多相关文章

  1. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

  2. spring boot 解决跨域访问

    package com.newings.disaster.shelters.configuration; import org.springframework.context.annotation.B ...

  3. Spring boot 解决跨域问题

    import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.we ...

  4. SpringMVC解决跨域的两种方案

    1. 什么是跨域 2. 跨域的应用情景 3. 通过注解的方式允许跨域 4. 通过配置文件的方式允许跨域 1. 什么是跨域 跨域,即跨站HTTP请求(Cross-site HTTP request),指 ...

  5. js常用代码示例及解决跨域的几种方法

    1.阻止默认行为 // 原生js document.getElementById('btn').addEventListener('click', function (event) { event = ...

  6. spring boot 用@CONFIGURATIONPROPERTIES 和 @Configuration两种方法读取配置文件

    spring cloud  读取 配置文件属性值 1.bean @Data public class LocalFileConfig { /** * 文件存储地址 */ private String ...

  7. spring boot 下websocket实现的两种方法

    websocket前台实现代码,保存为html执行就好 html代码来自:https://blog.csdn.net/M348915654/article/details/53616837 <h ...

  8. Spring Boot 允许跨域设置失败的问题深究

    在公司开发过程中,一个前后端分离的项目遇见了跨域的问题. 前端控制台报错:No 'Access-Control-Allow-Origin' header is present on the reque ...

  9. Spring Boot定义系统启动任务的两种方式

    Spring Boot定义系统启动任务的两种方式 概述 如果涉及到系统任务,例如在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行,这里,容易想到web ...

随机推荐

  1. 令无数程序员加班的 Log4j2 远程执行漏洞复现

    前情提要 Apache 存在 Log4j 远程代码执行漏洞,将给相关企业带来哪些影响?还有哪些信息值得关注? 构建maven项目引入Log4j2 编写 pom 文件 <?xml version= ...

  2. 第三届“传智杯”全国大学生IT技能大赛（初赛A组）题解

    留念 C - 志愿者 排序..按照题目规则说的排就可以.wa了两发我太菜了qwq #include<bits/stdc++.h> using namespace std; const in ...

  3. Intellij IDEA设置自定义类描述信息

    Intellij IDEA设置自定义类描述信息 样图 新建Java类自动生成模板信息:作者,时间,描述和其他信息 步骤 以 IntelliJ IDEA Community Edition 2020.1 ...

  4. 度量驱动的DevOps实现

    目录 一.简介 二.度量是什么 三.实践 四.QA问答 一.简介 Wiki上讲:DevOps(Development和Operations的组合词)是一种重视"软件开发人员(Dev)&quo ...

  5. CF74A Room Leader 题解

    Content 一场 CF 比赛有 \(n\) 个人,有 ABCDE 五道题目.在比赛过程中,参赛者还可以随时互相攻击,成功一次加 \(100\) 分,失败一次扣 \(50\)分,已知第 \(i\) ...

  6. JAVA通过经纬度获取两点之间的距离

    private static double EARTH_RADIUS = 6378.137; private static double rad(double d) { return d * Math ...

  7. 7、滑动窗口套路算法框架——Go语言版

    前情提示:Go语言学习者.本文参考https://labuladong.gitee.io/algo,代码自己参考抒写,若有不妥之处,感谢指正 关于golang算法文章,为了便于下载和整理,都已开源放在 ...

  8. 【LeetCode】1. Two Sum 两数之和

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:two sum, 两数之和,题解,leetcode, 力 ...

  9. 【LeetCode】721. Accounts Merge 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/accounts ...

  10. 初识TMMi——测试成熟度模型集成

    利用零碎的时间,粗略了解了一下TMMi V1.2,整理一下学习笔记跟大家分享一下. 本文分为四个部分,分别为TMMi概述.TMMi结构.成熟度级别和过程域.TMMi实施周期,希望能够帮助大家更好的理解 ...