JS跨域请求解决方案-CORS

文章目录

JS跨域请求解决方案-CORS
- 1.JS跨域请求
- - 测试JavaScript的跨域请求（失败）
- 2. 跨域解决方案CORS
- - 普通实现方法
  - springMVC的跨域请求注解
- 3.分布式Id解决方案
- - 分布式ID生成器

JS跨域请求解决方案-CORS

1.JS跨域请求

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

测试JavaScript的跨域请求（失败）

出现了以下错误

2. 跨域解决方案CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

普通实现方法

在请求的服务端的方法中加两个头信息

response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
response.setHeader("Access-Control-Allow-Credentials", "true");

客户端

springMVC的跨域请求注解

服务端
客户端：与普通方法一致

3.分布式Id解决方案

概述

当在互联网应用中某一个表太大时，会采用分布式数据库进行存储，在物理上是对各数据库多张表，在逻辑上是一个数据库，一张表，但是如果数据库的主键Id使用自增的方式，可能会长生重复的Id，这样在使用数据库时就会报错

UUID（不用他的理由：太长，无法进行排序）
redis（redis会产生一个自增的序号，作为数据库中的主键：主键的生成需要访问redis，对Redis有依赖）
Oracle（数据库对象-序列（与表无关）：只有数据库用Oracle才能用）
程序自己来写算法

分布式ID生成器

我们采用的是开源的twitter( 非官方中文惯称：推特.是国外的一个网站，是一个社交网络及微博客服务) 的snowflake（雪花）算法。

可以在一秒钟内生成26万不重复Id

代码

package util;import java.lang.management.ManagementFactory;
import java.net.InetAddress;
import java.net.NetworkInterface;/*** <p>名称：IdWorker.java</p>* <p>描述：分布式自增长ID</p>* <pre>*     Twitter的 Snowflake　JAVA实现方案* </pre>* 核心代码为其IdWorker这个类实现，其原理结构如下，我分别用一个0表示一位，用—分割开部分的作用：* 1||0---0000000000 0000000000 0000000000 0000000000 0 --- 00000 ---00000 ---000000000000* 在上面的字符串中，第一位为未使用（实际上也可作为long的符号位），接下来的41位为毫秒级时间，* 然后5位datacenter标识位，5位机器ID（并不算标识符，实际是为线程标识），* 然后12位该毫秒内的当前毫秒内的计数，加起来刚好64位，为一个Long型。* 这样的好处是，整体上按照时间自增排序，并且整个分布式系统内不会产生ID碰撞（由datacenter和机器ID作区分），* 并且效率较高，经测试，snowflake每秒能够产生26万ID左右，完全满足需要。* <p>* 64位ID (42(毫秒)+5(机器ID)+5(业务编码)+12(重复累加))** @author Polim*/
public class IdWorker {// 时间起始标记点，作为基准，一般取系统的最近时间（一旦确定不能变动）private final static long twepoch = 1288834974657L;// 机器标识位数private final static long workerIdBits = 5L;// 数据中心标识位数private final static long datacenterIdBits = 5L;// 机器ID最大值private final static long maxWorkerId = -1L ^ (-1L << workerIdBits);// 数据中心ID最大值private final static long maxDatacenterId = -1L ^ (-1L << datacenterIdBits);// 毫秒内自增位private final static long sequenceBits = 12L;// 机器ID偏左移12位private final static long workerIdShift = sequenceBits;// 数据中心ID左移17位private final static long datacenterIdShift = sequenceBits + workerIdBits;// 时间毫秒左移22位private final static long timestampLeftShift = sequenceBits + workerIdBits + datacenterIdBits;private final static long sequenceMask = -1L ^ (-1L << sequenceBits);/* 上次生产id时间戳 */private static long lastTimestamp = -1L;// 0，并发控制private long sequence = 0L;private final long workerId;// 数据标识id部分private final long datacenterId;public IdWorker(){this.datacenterId = getDatacenterId(maxDatacenterId);this.workerId = getMaxWorkerId(datacenterId, maxWorkerId);}/*** @param workerId*            工作机器ID* @param datacenterId*            序列号*/public IdWorker(long workerId, long datacenterId) {if (workerId > maxWorkerId || workerId < 0) {throw new IllegalArgumentException(String.format("worker Id can't be greater than %d or less than 0", maxWorkerId));}if (datacenterId > maxDatacenterId || datacenterId < 0) {throw new IllegalArgumentException(String.format("datacenter Id can't be greater than %d or less than 0", maxDatacenterId));}this.workerId = workerId;this.datacenterId = datacenterId;}/*** 获取下一个ID** @return*/public synchronized long nextId() {long timestamp = timeGen();if (timestamp < lastTimestamp) {throw new RuntimeException(String.format("Clock moved backwards.  Refusing to generate id for %d milliseconds", lastTimestamp - timestamp));}if (lastTimestamp == timestamp) {// 当前毫秒内，则+1sequence = (sequence + 1) & sequenceMask;if (sequence == 0) {// 当前毫秒内计数满了，则等待下一秒timestamp = tilNextMillis(lastTimestamp);}} else {sequence = 0L;}lastTimestamp = timestamp;// ID偏移组合生成最终的ID，并返回IDlong nextId = ((timestamp - twepoch) << timestampLeftShift)| (datacenterId << datacenterIdShift)| (workerId << workerIdShift) | sequence;return nextId;}private long tilNextMillis(final long lastTimestamp) {long timestamp = this.timeGen();while (timestamp <= lastTimestamp) {timestamp = this.timeGen();}return timestamp;}private long timeGen() {return System.currentTimeMillis();}/*** <p>* 获取 maxWorkerId* </p>*/protected static long getMaxWorkerId(long datacenterId, long maxWorkerId) {StringBuffer mpid = new StringBuffer();mpid.append(datacenterId);String name = ManagementFactory.getRuntimeMXBean().getName();if (!name.isEmpty()) {/** GET jvmPid*/mpid.append(name.split("@")[0]);}/** MAC + PID 的 hashcode 获取16个低位*/return (mpid.toString().hashCode() & 0xffff) % (maxWorkerId + 1);}/*** <p>* 数据标识id部分* </p>*/protected static long getDatacenterId(long maxDatacenterId) {long id = 0L;try {InetAddress ip = InetAddress.getLocalHost();NetworkInterface network = NetworkInterface.getByInetAddress(ip);if (network == null) {id = 1L;} else {byte[] mac = network.getHardwareAddress();id = ((0x000000FF & (long) mac[mac.length - 1])| (0x0000FF00 & (((long) mac[mac.length - 2]) << 8))) >> 6;id = id % (maxDatacenterId + 1);}} catch (Exception e) {System.out.println(" getDatacenterId: " + e.getMessage());}return id;}
}

. 在spring中配置上，注入两个值
在了中直接注入实用就行

JS跨域请求解决方案-CORS相关推荐

Node.js跨域请求解决方案
Node.js跨域请求解决方案一.缘由: 初到公司,老大让去解决之前项目客户提出的一个小问题,对某一模块进行访问验证,之前的项目是PHP做的,对此不了解,因此不打算先学习PHP再去解决问题,考虑到客 ...
跨域请求解决方案及详解
1. 什么是跨域跨域,是指浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制. 同源策略限制了一下行为: Cookie.LocalStorage ...
js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式表单POST方式服务器代理 Html5的X ...
Node.JS跨域请求配置方案
今天在用node开发的过程中,再次遇到同源策略的问题: 在客户端调用服务端获取数据时,Chrome 浏览器中报错如下: Access to XMLHttpRequest at 'http://loca ...
ajax跨域请求(cors实现),ajax跨域请求（CORS实现）
场景:目前有项目A(基于servlet的WEB项目),和项目B(基于spring boot的WEB项目),使用同一CAS提供单点登陆,如今须要两个项目互相调用接口数据,因此涉及到ajax的跨域请求ja ...
Ajax跨域请求解决方案——jsonp
转自:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 1.一个众所周知的问题,Ajax直接请求普通 ...
ajax跨域请求（CORS实现）
场景:目前有项目A(基于servlet的WEB项目),和项目B(基于spring boot的WEB项目),使用同一CAS提供单点登录,现在需要两个项目互相调用接口数据,所以涉及到ajax的跨域请求调 ...
同源策略和跨域请求解决方案
一.一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: ...
跨域请求被 CORS 策略阻止：请求的资源上存在“Access-Control-Allow-Origin”标头。
跨域请求资源被阻止做b站谷粒学苑小项目,在网上下载的vue-admin-template4.4.0模板在vscode打开并替换登录请求地址时, vue中使用的端口为9528,而登录请求访问的地址在根 ...

JS跨域请求解决方案-CORS

文章目录

JS跨域请求解决方案-CORS

1.JS跨域请求

测试JavaScript的跨域请求（失败）

2. 跨域解决方案CORS

普通实现方法

springMVC的跨域请求注解

3.分布式Id解决方案

分布式ID生成器

JS跨域请求解决方案-CORS相关推荐

最新文章

热门文章