Java开发中解决Js的跨域问题过程解析

这篇文章主要介绍了Java开发中解决Js的跨域问题过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

主流方法有JSONP和CORS两种，这里记一下后者的方式，理论基础就是在请求的时候在http请求头中添加如下属性：

//指定允许其他域名访问
Access-Control-Allow-Origin:http://localhost:8989

如果后端用Java开发，在返回请求中可以添加如下属性

1.在跨域问题中，如果不操作cookie，只需要在后端代码中添加如下代码就可以

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8989");
//第二个参数的意思就是说是哪个地址访问，如果要通配全部，就使用*即可

虽然是加在了response中，但是HTTP是基于TCP（传输层协议）的应用层协议，每次请求的时候都会有“三次握手”的过程，所以添加在response中后，会在第一次请求中告知客户端可以请求。

如果是SpringMVC4.2以上版本的话，一个注解就可以搞定

@CrossOrigin(origins=http://localhost:8080)

这个注解就是对上边的代码的封装,源码如下：

@Target({ElementType.TYPE, ElementType.METHOD})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {
  @Deprecated
  String[] DEFAULT_ORIGINS = new String[]{"*"};
  @Deprecated
  String[] DEFAULT_ALLOWED_HEADERS = new String[]{"*"};
  @Deprecated
  boolean DEFAULT_ALLOW_CREDENTIALS = false;
  @Deprecated
  long DEFAULT_MAX_AGE = 1800L;

  @AliasFor("origins")
  String[] value() default {};

  @AliasFor("value")
  String[] origins() default {};

  String[] allowedHeaders() default {};

  String[] exposedHeaders() default {};

  RequestMethod[] methods() default {};

  String allowCredentials() default "";

  long maxAge() default -1L;
}

@Deprecated:若某类或某方法加上该注解之后，表示此方法或类不再建议使用，调用时也会出现删除线，但并不代表不能用，只是说，不推荐使用，因为还有更好的方法可以调用。

2.如果跨域请求中涉及了对cookie的操作，就要添加一个属性,代码和注解分别为

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8989");
response.setHeader("Access-Control-Allow-Credentials", "true");
@CrossOrigin(origins="http://localhost:8989",allowCredentials="true")

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 跨域解决之JSONP和CORS的详细介绍

    JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行. JSONP跨域 只支持GET请求,不支持POST等其它请求,也不支持复杂请求,只支持简单请求. CORS跨域 支持所有的请求,包含GET.POST.OPTOIN.PUT.DELETE等.既支持复杂请求,也支持简单请求

  • 利用jsonp解决js读取本地json跨域的问题

    利用jsonp解决js读取本地json跨域的问题

    前言 本文主要给大家介绍了关于使用jsonp解决js读取本地json跨域的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 一 .问题描述 通过ajax方式读取本地json文件,谷歌浏览器会提示跨域错误,导致获取不到json数据. 跨域报错.png ajax获取json数据代码: $.ajax({ url: "file/employeejson.json",//json文件位置 type: "GET",//请求方式为get dataType:

  • Ajax跨域问题及解决方案（jsonp，cors）

    跨域 跨域有三个条件,满足任何一个条件就是跨域 1:服务器端口不一致  2:协议不一致  3:域名不一致 解决方案: 1.jsonp 在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理:在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系:为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp . 代码如下: html: <body> <form action="/&q

  • springboot+jsonp解决前端跨域问题小结

    springboot+jsonp解决前端跨域问题小结

    现在咱们一起来讨论浏览器跨域请求数据的相关问题.说这样可能不是很标准,因为拒绝跨域请求数据并不是浏览器所独有的,之所以会出现跨域请求不了数据,是因为浏览器基本都实现了一个叫"同源策略"的安全规范.该规范具体是什么呢?我们在MDN上找到了一份资料,地址如下: 浏览器同源策略讲解 总的来说,当A网址和B网址在 协议 . 端口 . 域名 方面存在不同时,浏览器就会启动同源策略,拒绝A.B服务器之间进行数据请求. 说了同源策略,纸上得来终觉浅,绝知此事要躬行,到底同源策略是怎么体现的呢?下面我

  • 跨域请求两种方法 jsonp和cors的实现

    在网站后台跨域访问另一服务器时,若被访问服务器未设置response['Access-Control-Allow-Origin'] = '*' 那么将无法获取. jsonp方法 伪造ajax提交请求 请求端 // 基于jsonp // 原理: ajax 不能直接跨域 . //向html中加入script标签 含有访问路径,script标签直接访问路径达到效果 $('.get_service2').click(function () { // 伪造ajax提交请求 $.ajax({ url:'ht

  • 说说如何利用 Node.js 代理解决跨域问题

    说说如何利用 Node.js 代理解决跨域问题

    前后端分离,经常会出现跨域访问被限制的问题. 跨域访问限制是服务端出于安全考虑的限制行为.即只有同域或者指定域的请求,才能访问.这样还可以防止图片被盗链.服务端(比如 Node.js)可以通过代理,来解决这一问题. 1 安装 request 库 npm install request --save-dev 2 配置 我们以知乎日报为例,配置两个代理.一个代理内容,另一个代理图片. 在项目根目录,配置 proxy.js : //代理 const http = require('http'); co

  • JS中使用cavas截图网页并解决跨域及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. 我们先来引入canvas的js文件,js文件获取地址官网主页:http://html2canvas.hertzen.com/ <script type="text/javascript" src="js/html2canvas.js"></scrip

  • Springboot 实现跨域访问无需使用jsonp的实现代码

    Springboot 实现跨域访问 无需使用jsonp 在springboot的拦截器中添加respone的头信息即可 @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //String origin = (String) request.getRemoteHost()+":"+re

  • Java开发中解决Js的跨域问题过程解析

    这篇文章主要介绍了Java开发中解决Js的跨域问题过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 主流方法有JSONP和CORS两种,这里记一下后者的方式,理论基础就是在请求的时候在http请求头中添加如下属性: //指定允许其他域名访问 Access-Control-Allow-Origin:http://localhost:8989 如果后端用Java开发,在返回请求中可以添加如下属性 1.在跨域问题中,如果不操作cookie,只需

  • Django中使用CORS实现跨域请求过程解析

    跨域请求: 请求url包含协议.网址.端口,任何一种不同都是跨域请求. 1.安装cors模块 pip install django-cors-headers 2.添加应用 INSTALLED_APPS = ( ... 'corsheaders', ... ) 3.设置中间件 MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', ... ] 4.添加允许访问的白名单,凡是出现在白名单的域名都可以访问后端接口 # CORS CORS_ORIG

  • Springboot前后端分离项目配置跨域实现过程解析

    项目登录流程如下 用户进入前端登录界面,输入账号密码等,输入完成之后前端发送请求到后端(拦截器不会拦截登录请求),后端验证账号密码等成功之后生成Token并存储到数据库,数据库中包含该Token过期时间,然后返回生成的Token到前端. 前端收到Token,表示登录成功,把这个Token存储本地.然后跳转到用户中心页面,用户中心页面在ajax的请求头中带上Token,跟随请求用户数据接口一起带到后端. 后端通过拦截器拦截到这个请求,去判断这个Token是否有效,有效就放过去做他该做的事情,无效就

  • Vue3配置axios跨域实现过程解析

    实现跨域共3个步骤: 1,vue3.0根目录下创建vue.config.js文件: module.exports = { devServer: { proxy: { '/api': { target: 'https://you.163.com/', //接口域名 changeOrigin: true, //是否跨域 ws: true, //是否代理 websockets secure: true, //是否https接口 pathRewrite: { //路径重置 '^/api': '' } }

  • python web.py开发httpserver解决跨域问题实例解析

    使用web.py做http server开发时,遇到postman能够正常请求到数据,但是浏览器无法请求到数据,查原因之后发现是跨域请求的问题. 跨域请求,就是在浏览器窗口中,和某个服务端通过某个 "协议+域名+端口号" 建立了会话的前提下,去使用与这三个属性任意一个不同的源提交了请求,那么浏览器就认为你是跨域了,违反了浏览器的同源策略. w3c标准中,有针对跨域请求的规范,在响应头中有以下三种跨域访问限制: Access-Control-Allow-Origin:限制允许跨域访问的源

  • js实现跨域的多种方法

    js实现跨域的多种方法

    从域说起 域: 域是WIN2K网络系统的安全性边界.我们知道一个计算机网最基本的单元就是"域",这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域.在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全策略以及它与其他域的信任关系.当多个域通过信任关系连接起来之后,活动目录可以被多个信任域域共享 域树:域树由多个域组成,这些域共享同一表结构和配置,形成一个连续的名字空间.树中的域通过信任关系连接起

  • JS JSOP跨域请求实例详解

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

  • js实现跨域的方法实例详解

    本文实例讲述了js实现跨域的方法.分享给大家供大家参考.具体分析如下: 由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名.协议.端口)的资源. json与jsonp的区别: JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议. script标签经常被用来加载不同域下的资源,可以绕过同源策略.(有src属性的都可以获取异域文件). 如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval).   方法一

  • Java开发中常用的 Websocket 技术参考

    1. 前言 Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据,当然也支持客户端发送数据到服务端.通常用来社交聊天.弹幕.多玩家游戏.协同编辑.股票基金实时报价.资讯自动更新等场景,那么今天就简单聊一下在 Java 开发中对Websocket的技术选型. 技术选型是结合自身业务选择最适合的技术方案,并不存在褒贬. 2. 常用的 Websocket 技术 2.1

  • 解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

    我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢? 这是因为CORS跨域分为 简单跨域请求和复杂跨域请求: 简单跨域不会发送options请求,复杂跨域会发送一个预检请求options. 1.简单跨域满足的条件 1.请求方式是以下三种之一: HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Lan

随机推荐