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. 剖析虚幻渲染体系（13）- RHI补充篇：现代图形API之奥义与指南

    目录 13.1 本篇概述 13.1.1 本篇内容 13.1.2 概念总览 13.1.3 现代图形API特点 13.2 设备上下文 13.2.1 启动流程 13.2.2 Device 13.2.3 Sw ...

  2. Mysql资料 主键

    目录 一.简介 二.操作 三.技巧 一.简介 主键意味着表中每一行都应该有可以唯一标识自己的一列(或一组列). 一个顾客可以使用顾客编号列,而订单可以使用订单ID,雇员可以使用雇员ID 或 雇员社会保 ...

  3. Mybatis中对象关系映射

    在实际开发中,实体类之间有一对一.一对多.多对多的关系,所以需要正确配置它们对应关系,Mybatis通过配置文件能够从数据库中获取列数据后自动封装成对象. 如:一个订单Orders类对应一个用户Use ...

  4. 一道栈溢出babystack

    我太天真了,师傅说让我做做这个平台的题,我就注册了个号,信心满满的打开了change,找到了pwn,一看第一道题是babystack,我想着,嗯,十分钟搞定他!直到我下载了题目,题目给了libc,然后 ...

  5. uni-app + Cloudbase——uni-app 项目中如何使用腾讯云开发后端服务

    1 基本介绍 uni-app 是一个基于 Vue.js 的跨端开发框架,一套代码可以发布到 App.小程序.Web 等不同平台 腾讯云开发平台 Cloudbase 提供的 @cloudbase/js- ...

  6. TensorFlow.NET机器学习入门【1】开发环境与类型简介

    项目开发环境为Visual Studio 2019 + .Net 5 创建新项目后首先通过Nuget引入相关包: SciSharp.TensorFlow.Redist是Google提供的TensorF ...

  7. C++字符串常量跨平台编译问题

    C++字符串常量跨平台编译问题(与字符串编码相关),有需要的朋友可以参考下. 1. 问题 在C++代码中,给一个string类型的变量赋值一个中文字符串常量,例如: string s = " ...

  8. cmake引入第三方库的debug和release版本之Windows版本

    概述 本文将介绍cmak引入第三方库debug和release不同配置. Windows上,习惯将debug模式下生成的动态库名后缀添加D 以作和release区分.cmake创建一个项目A,A引入动 ...

  9. win10使用照片查看器查看图片

    1.关于 演示环境: win10 1909 2.习惯win7的照片查看器 如果你习惯使用win7的照片查看器在win10查看照片,可以通过下面的注册表代码实现.方法:1.创建 后缀名为 .reg的文件 ...

  10. Android 控件使用教程（三）—— NineGridImageView 九宫格展示图片

    引子 上文降到RecyclerView的使用,确实非常方便易用,而且样式多样,很灵活.但在图像展示时,经常有朋友圈和微博等9张图以内的图片展示需求,这时候,不是一个可以无限下滑的RecyclerVew ...