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. mybatis联合查询

    1.有学生实体 @Component @Scope("prototype") public class StudentInfo { private Integer studentI ...

  2. WPF将窗口置于桌面下方（可用于动态桌面）

    WPF将窗口置于桌面下方(可用于动态桌面) 先来看一下效果: 界面元素很简单,就一个Button按钮,然后写个定时器,定时更新Button按钮中的内容为当前时间,下面来介绍下原理,和界面组成. 窗口介 ...

  3. [BUUCTF]REVERSE——[ACTF新生赛2020]usualCrypt

    [ACTF新生赛2020]usualCrypt 附件 步骤: 例行检查,无壳,32位程序 32位ida载入,直接看main函数 逻辑很简单,一开始让我们输入一个字符串,然后该字符串经过sub_4010 ...

  4. 『学了就忘』Linux系统管理 — 85、工作管理相关命令

    目录 1.工作管理简介 2.如何把命令放入后台 3.后台管理命令 (1)查看后台的工作 (2)将后台暂停的工作恢复到前台执行 (3)把后台暂停的工作恢复到后台执行 4.后台命令脱离登录终端运行 1.工 ...

  5. 一台电脑如何安装多个版本的JDK及其说明

    一.安装多个版本的JDK及其说明 1.准备多个版本的JDK 需要请点击下载 2.安装过程,除了根据需要更改安装路径,其他"傻瓜式"安装("下一步"),各版本都是 ...

  6. CF1003C Intense Heat 题解

    Content 给定一个长度为 \(n\) 的数列,求数列中所有长度 \(\geqslant k\) 的区间的最大平均值. 数据范围:\(1\leqslant k,n,a_i\leqslant 500 ...

  7. LuoguP7072 [CSP-J2020] 直播获奖 题解

    Update \(\texttt{2020.11.13}\) 修改了一个小细节. \(\texttt{2020.11.16}\) 修改了一个错误. Content 有一场 \(n\) 个人的比赛,计划 ...

  8. CF1501A Alexey and Train 题解

    Content 一列火车从 \(0\) 时刻开始从 \(1\) 号站出发,要经过 \(n\) 个站,第 \(i\) 个站的期望到达时间和离开时间分别为 \(a_i\) 和 \(b_i\),并且还有一个 ...

  9. 使用django + KindEditor 开发个人博客系统

    前奏小知识 1. 通过url参数组合不同的过滤条件 django框架部分 1. 数据结构models from django.db import models # Create your models ...

  10. tmux技巧

    tmux 输入sz rz卡住的解决办法 解决: 仅连续4次输入ctrl+x即可解决. 原因:原因是在Xmodem协议中,ctrl+x 为信号 CAN,在协议中为"无条件中止"信号. ...