web开发跨域原因的多种解决方案

目录
  • 跨域原因
  • JSONP
  • Nginx解决
  • 后端解决

跨域原因

是由于浏览器的同源策略限制;

跨域指: 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

JSONP

这种方式并不适用于开发, 可以说是被完全淘汰, 但是由于实现复杂, 面试官对于这种方案的深究非常追崇.

核心思想： 网页通过添加一个<script>标签的src属性，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

缺点: 需要后端配合才能完成只能发送get请求

实现: 注意后端返回的是一个方法的调用和实参

Nginx解决

后端解决

在Controller层加注解:

@CrossOrigin(origins = "*", allowedHeaders = "*")

origins: 允许来源域名的列表

allowedHeaders: 跨域请求中允许的请求头中的字段类型

以上就是web开发跨域原因的多种解决方案的详细内容，更多关于web开发跨域解决的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JavaScript web网页入门级开发详解

    JavaScript web网页入门级开发详解

    第三篇:❤三种方式俯瞰后端数据接收❤(建议收藏) 第二篇:玩转web表单网页快速开发(❤建议收藏❤) 一.前言 提前学习web的有关知识,那我们来认识这个神乎怪哉的东西. 我的idea是中文版的,不过区别不大. 第一步:首先创建一个新项目,按照图示 第二步:起个任意名字,然后图示 第三步:这个你在项目里创建新项目的时候会弹出,弹出建议点新窗口 第四步:按照图示点击即可 第五步:注意圈起来的要一样 第六步:这两个名字任意的 第七步:按图示操作即可 第八步:直接点完成即可 第九步:如图 第十步:依次

  • js实现web留言板功能

    js实现web留言板功能

    本文实例为大家分享了js实现web留言板的具体代码,供大家参考,具体内容如下 1.画一个标题栏和一个内容栏,提交按钮,留言板 心情:<br/> <input type="text" id="mood"/><br/> 笔记:<br/> <textarea id="network"></textarea><br/> <button id="send&q

  • 浅谈Webpack4 plugins 实现原理

    目录 前言 认识 实践出真知 前言 在 wabpack 中核心功能除了 loader 应该就是 plugins 插件了,它是在webpack执行过程中会广播一系列事件,plugin 会监听这些事件并通过 webpack Api 对输出文件做对应的处理, 如 hmlt-webpack-plugin 就是对模板魔剑 index.html 进行拷贝到 dist 目录的 认识 先来通过源码来认识一下 plugins 的基本结构 https://github.com/webpack/webpack/blo

  • web开发js字符串拼接占位符及conlose对象Api详解

    web开发js字符串拼接占位符及conlose对象Api详解

    目录 占位符替换 控制台打印 table() log.info.warn.error group(),groupCollapsed(),groupend() 占位符替换 控制台打印(conlose.log())或者拼接字符换, 可以借助占位符解决 %s    字符串 %d  / %i    整数 %f    小数(整数.小数都可以, 推荐) %o    对象 %c    后面字符串的样式 示例代码: // %s示例 let s1 = '爱' let s2 = '祖国' console.log('

  • JavaScript一文带你玩转web表单网页

    JavaScript一文带你玩转web表单网页

    一.前言 前面我们介绍了web网页的快速开发,这次我们讲点更深层次些的,看这面之前建议先看 上篇,之后在食用这篇. 二.正文部分 如图示:点击webapp上面的小三角形点到直到看到jsp位置 我们在创建好了之后这里会有jsp的空单子,我们在这输入的内容,会先反馈到前端,之后再进行 后端数据处理和接收. 第一步:我们先在这输入一些东西如图:其中<h1>内容</h1>这是格式,说明中间的内容是 一个h1 大小的标题,h1--h6标题在逐渐减小,要慎用h1,因为h1比较大 要先点击这个运

  • web项目开发之JS函数防抖与节流示例代码

    web项目开发之JS函数防抖与节流示例代码

    目录 防抖 引入 防抖场景1(鼠标移入) 防抖场景2(键盘按键) 函数节流 防抖 经典应用常见: 手风琴效果 引入 没有做防抖的网站: 做了防抖的网站: 防抖场景1(鼠标移入) 抖动 : 用户本来不想触发这个交互,但是由于鼠标不小心抖动误触发交互事件. 例子: 想看第五张图片,.不想看2 3 4张. 但是鼠标从第1张滑到第五张时候,不小心放在了2 3 4上面.误触发. 函数防抖 : 用户连续多次触发某个事件,则只执行最后一次. 解决原理: 开启定时器,间隔时间内如果多次触发事件,则每一次都清除上

  • web开发跨域原因的多种解决方案

    web开发跨域原因的多种解决方案

    目录 跨域原因 JSONP Nginx解决 后端解决 跨域原因 是由于浏览器的同源策略限制; 跨域指: 当一个请求url的协议.域名.端口三者之间任意一个与当前页面url不同即为跨域 JSONP 这种方式并不适用于开发, 可以说是被完全淘汰, 但是由于实现复杂, 面试官对于这种方案的深究非常追崇. 核心思想: 网页通过添加一个<script>标签的src属性,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来. 缺点: 需要后端配合才能完成只能发送

  • 跨域(CORS)问题的解决方案分享

    目录 前后端分离项目,如何解决跨域问题 什么是跨域问题 跨域问题演示及解决 点击前端登录按钮 覆盖默认的CorsFilter来解决该问题 重新运行代码,点击登录按钮 设置SpringSecurity允许OPTIONS请求访问 重新运行代码,点击登录按钮 一次完整的跨域请求 先发起一次OPTIONS请求进行预检 发起真实的跨域请求 前后端分离项目,如何解决跨域问题 跨域资源共享(CORS)是前后端分离项目很常见的问题,本文主要介绍当SpringBoot应用整合SpringSecurity以后如何解

  • NODE.JS跨域问题的完美解决方案

    NODE.JS跨域问题的完美解决方案

    这几天公司同事(前端)写页面的时候一直说拿不到想要的JSON,安卓iOS那边是可以拿到的,但他也是新手也不知道为什么只知道是js跨域问题,然后问我我也不懂前端我开始百度, 有人说是谷歌浏览器跨域要设置一下,然后我就在谷歌浏览器的目标后面加一个 --disable-web-security 但是后来发现依然报错,依然拿不到想要的数据.后来也不停的找找找也没有什么眉目. 直到今天百度了一下PHP的跨域启发了我,于是百度找到了node.js的跨域问题,最后我在 app.js 路由设置里面加了一段跨域代

  • webpack开发跨域问题解决办法

    本文介绍了webpack开发跨域问题解决办法,分享给大家,具体如下: 1. 说明 webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题 2. API 需要代理的 pathname 要加 / module.exports = { devtool: 'cheap-module-source-map', entry: './app/js/index.js' output: { path: path.resolve(__dirname, 'dev'),

  • javascript跨域原因以及解决方案分享

    产生跨域问题的原因 跨域问题是浏览器同源策略限制,当前域名的js只能读取同域下的窗口属性. 跨域问题产生的场景 当要在在页面中使用js获取其他网站的数据时,就会产生跨域问题,比如在网站中使用ajax请求其他网站的天气.快递或者其他数据接口时以及hybrid app中请求数据,浏览器就会提示以下错误.这种场景下就要解决js的跨域问题. XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header

  • JS跨域(Access-Control-Allow-Origin)前后端解决方案详解

    浏览器的同源安全策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收.同源:协议 + 域名 + 端口.所以,怎么才算跨域呢? 什么是跨域 什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.co

  • 详解springboot和vue前后端分离开发跨域登陆问题

    前后端分离开发中,一般都会遇到请求跨域问题.而且一般也会遇到登陆失效问题.今天就以springboot和vue为例来看如何解决上述问题 增加过滤器 @WebFilter @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException,

  • JQuery Ajax执行跨域请求数据的解决方案

    今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下 原来的ajax请求如下: $.ajax({ type:"post", url:platformUrl +"/security/modifyPwd.do", data:$('#updatepwdform').serialize(), dataType:"json", success:function(data){ $("#upda

  • Springboot跨域问题三种解决方案

    使用vue+axios+spring boot前后端分离项目时会出现跨域问题 解决方式: 一: 全局配置 /** * 就是注册的过程,注册Cors协议的内容. * 如: Cors协议支持哪些请求URL,支持哪些请求类型,请求时处理的超时时长是什么等. */ @Override public void addCorsMappings(CorsRegistry registry) { registry .addMapping("/**")// 所有的当前站点的请求地址,都支持跨域访问. .

  • go 原生http web 服务跨域restful api的写法介绍

    错误写法 func main() { openHttpListen() } func openHttpListen() { http.HandleFunc("/", receiveClientRequest) fmt.Println("go server start running...") err := http.ListenAndServe(":9090", nil) if err != nil { log.Fatal("Liste

随机推荐