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. 【C/C++】【输入】关于scanf：输入空格，多次使用

    一.C/C++中带空格字符串的输入 C++中的cin和C中的scanf都是遇到空格或回车结束. 如果要让scanf接收空格,可以用读入字符集合的方式.%[] char a[100]; scanf(&q ...

  2. ICCV2021 | 简单有效的长尾视觉识别新方案：蒸馏自监督(SSD)

    ​  前言  本文提出了一种概念上简单但特别有效的长尾视觉识别的多阶段训练方案,称为蒸馏自监督(Self Supervision to Distillation, SSD).在三个长尾识别基准:Ima ...

  3. 魅族CMDB运维自动化实践

    一.简介 原创:梁鹏 本文是根据魅族系统架构师梁鹏10月20日在msup携手魅族.Flyme.百度云主办的第十三期魅族技术开放日< 魅族CMDB运维自动化实践>演讲中的分享内容整理而成. ...

  4. 发布iOS应用(xcode5)到App Store（苹果商店） 详细解析

    发布iOS应用(xcode5)到App Store(苹果商店) 详细解析 作者:Memory 发布于:2014-8-8 10:44 Friday IOS 此教程可能不太适合,请移步至最新最全的:201 ...

  5. 转：Sed使用

    awk于1977年出生,今年36岁本命年,sed比awk大2-3岁,awk就像林妹妹,sed就是宝玉哥哥了.所以 林妹妹跳了个Topless,他的哥哥sed坐不住了,也一定要出来抖一抖. sed全名叫 ...

  6. RocketMQ源码详解 | Broker篇 · 其五：高可用之主从架构

    概述 对于一个消息中间件来讲,高可用功能是极其重要的,RocketMQ 当然也具有其对应的高可用方案. 在 RocketMQ 中,有主从架构和 Dledger 两种高可用方案: 第一种通过主 Brok ...

  7. C51单片机0~60计数器

    源码 #include<reg51.h> unsigned char code table[]={0x3f,0x06,0x5b,0x4f,0x66,0x6d,0x7d,0x07,0x7f, ...

  8. CF513B1 Permutations 题解

    Content 给定两个整数 \(n,m\).定义 \(f(p)=\sum\limits_{l=1}^n\sum\limits_{r=l}^n\min\limits_{i=l}^rp_i\),其中 \ ...

  9. Java整合redis报错s if RDB snapshotting fails (stop-writes-on-bgsave-error option)

    Caused by: io.lettuce.core.RedisCommandExecutionException: MISCONF Redis is configured to save RDB s ...

  10. _MSC_VER值对应的Visual Studio版本

    移步官网查看更多定义 1. 关于 今天使用cmake需要判断_MSC_VER的值是多少,额,官网查了下,还真不少 2. 查看 用下面的代码可以输出宏_MSC_VER的值 #pragma once #i ...