处理跨域方式

简介:

一、跨域

一个域名地址的组成:

当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。

不同域之间相互请求资源,就算作“跨域”。

比如:http://www.abc.com/index.html请求http://www.efg.com/service.php

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。

什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或者是c.a.com域名下的对象。

  • ww.abc.com/index.html调用www.abc.com/service.php(非跨域)

  • ww.abc.com/index.html调用www.efg.com/service.php(跨域) 主域名不同

  • ww.abc.com/index.html调用bbs.abc.com/service.php(跨域)   子域名不同

  • ww.abc.com/index.html调用www.abc.com:81/service.php(跨域)   端口号不同

  • ww.abc.com/index.html调用https://www.abc.com/service.php(跨域)   不写默认是http协议,协议不同,所以跨域。

子域名:

下面都是abc.com的子域名,可以有一级,也可以有多级,子域名不同就跨域了。

  • www.abc.com

  • bbs.abc.com

  • beijing.bbs.abc.com

  • haidian.beijing.bbs.abc.com

一、处理跨域方式—代理

主要是后端做一个代理,跟前端没关系。

通过在同域名的web服务器端创建一个代理:

北京服务器(域名:www.beijing.com)

上海服务器(域名:www.shanghai.com)

比如在北京的web服务器的后台

(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/service.php)的服务,然后把响应结果返回给前端,这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

二、处理跨域方式—JSONP

JSONP解决主流浏览器get请求的跨域数据访问问题。

复制代码

在www.aaa.com页面中<script>function jsonp(json){
    slert(json["name"]);
}</script>

<script src="http://www.bbb.com/jsonp.js"></script> 
//载入另外一个域名中的js,在www.bbb.com/jsonp.js代码中调用jsonp方法:jsonp({'name':'洪七','age':24});

复制代码

1、原理

在A域名去声明一个方法,

载入B域名中的js,因为script可以跨域提交http请求。

B域名中载入的js中直接去调用a域名中声明的方法。

借助script标签,A域名去声明,B域名去调用。

其实这种处理方式和XHR没有太大关系了,只是借助script标签可以跨域访问的特性。

2、使用

前端改造:

在get请求的代码中需要修改一下dataType,从json改为jsonp。再增加一个属性,这个名字就叫jsonp,值可以任意写,比如叫callback。

也就是对代码做了2处改动,

  • 把dataType从json改成jsonp,

  • 增加一jspnp的属性取了个值叫callback。

后端改造:

在get请求的处理中获取到callback, 前端jsonp参数取了个名字叫callback,所以后端就要获取callback。

如果前端取callback123的话,后端就要获取callback123。

3、分析

发请求的时候jquery自动增加了一个参数,参数的名称是callback123,参数的值是jquery自动生成的。

比如我实际应用中一例子:

发完ajax请求,网页中请求的Headers的Request URL为:http://api.xxx.com/vipuser/grade?cb=jQuery18308066630555287624_1487902991956&username=xxx&token=xxx&format=jsonp

参数名cb,参数的值是jquery自动生成的。
这个值是:jQuery18308066630555287624_1487902991956

响应Response为:

返回值:jQuery18308066630555287624_1487902991956({"message":"success","gradeInfo":{xxx},"code":"0","info":{xxx}})

返回值前面是参数的值,一模一样,后面用括号括起了要返回的json对象。

最后注意一点:JSONP的原理只能对get请求有效,不支持POST请求。

三、处理跨域方式—XHR2(HTML5)

html5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能。

IE10以下不支持XHR2这个标准。

使用

客户端不需要什么改造。

服务器:只需要设置2个服务器头。

header('Access-Control-Allow-Origin:*');后面有个*星号,*就是所有域都可以访问,当然也可以设置特点的域名。比如说我们服务器在上海,可以在Access-Control-Allow-Origin后面设置一个北京服务器的域名,只有在北京的那个域名可以访问。

header('Access-Control-Allow-Methods:POST,Get');


本文转自帅气的头头博客51CTO博客,原文链接http://blog.51cto.com/12902932/1926154如需转载请自行联系原作者

sshpp
相关文章
|
13天前
|
人工智能 自然语言处理 安全
阿里云千问办公 QwenWork详细介绍:产品核心能力、典型场景、价格及常见问题解答
千问办公是阿里云推出的一站式AI办公平台,主打"不止于对话,更注重交付",依托通义千问旗舰大模型,用户一句话即可完成数据分析、PPT生成、视频剪辑等复杂任务,直接输出可用成果。产品深度打通钉钉生态与企业OA,覆盖桌面端、网页端,提供企业标准版198元/人/月等多档订阅方案,新用户注册即赠2000积分,适配工程师、HR、财务等多职业办公场景,成为能动手干活的"全能AI同事"。
|
13天前
|
人工智能
千问办公官网入口:阿里AI办公QwenWork产品页和免费网页端链接
千问办公官网含两大入口:一是网页端(qwenwork.cn),即开即用,支持浏览器直接访问;二是阿里云产品页 https://t.aliyun.com/U/JNKJuO 提供免费/付费版详情、功能介绍及使用指南。
|
12天前
|
IDE 开发工具
Qoder 上线 Sonus 模型,Computer Use 能力全面增强
Qoder国际版上线全新内置大模型Sonus(/ˈsoʊnəs/),全球领先,专精超长任务执行与电脑操作(Computer Use)。配合Qoder桌面端0.2.3版本,可自主完成编程、金融建模、科研及表格制作等复杂工作。现全面支持Qoder全系产品,效率提升3.2倍。
1529 8
Qoder 上线 Sonus 模型,Computer Use 能力全面增强
|
14天前
|
缓存 人工智能 自然语言处理
阿里云qwen3.8-flash大模型介绍:模型能力、模型价格、免费额度与最新活动
本文是阿里云百炼平台Qwen3.8-Flash大模型的选型接入指南,作为兼顾性能与响应速度的高性价比多模态模型,它支持百万级上下文窗口、全场景多模态输入与完整智能体能力矩阵,适配编程辅助、智能体协作等核心场景。文中同步梳理了最新下调的阶梯定价、夜间4折等优惠活动,搭配OpenAI兼容流式调用示例,帮助开发者低成本快速落地高并发AI应用。
阿里云qwen3.8-flash大模型介绍:模型能力、模型价格、免费额度与最新活动
|
14天前
|
人工智能 API 内存技术
刚刚 DeepSeek V4.1 Flash 开启内测,1 分钟教你用上!
刚刚 DeepSeek 内测群发布了 DeepSeek V4.1 Flash 中间版本内测的消息,这次的模型采用了新的结构,原生支持多模态、能力更强、速度更快、且成本更低。
1990 15
|
7天前
|
缓存 IDE Java
【保姆级】Android Studio下载、安装和汉化教程(2026最新)
Android Studio 是 Google 官方推出的免费 Android 应用开发集成环境,基于 IntelliJ IDEA,内置模拟器、调试器、性能分析及 Compose 界面工具,功能全面,文档丰富,是安卓开发首选工具。(239字)
|
18天前
|
人工智能 运维 BI
阿里云千问办公QwenWork深度解析:基于Qwen3.8,六大核心能力重构企业全自动化工作流与计费选型指南
传统AI办公工具大多停留在对话问答、文档摘要、简单文案生成层面,只能完成单点碎片化任务,无法自主拆解复杂业务流程,很难串联多工具、多文档、外部业务系统完成端到端完整工作交付。很多企业在落地AI办公的时候,需要组合多款不同工具,来回切换界面,手动复制粘贴中间结果,智能化改造落地门槛居高不下。千问办公QwenWork是整合多款智能体产品能力打造的一体化企业办公智能体平台,底层基座依托Qwen3.8大模型,打通桌面端Agent、云端Agent、企业协同Agent三种运行形态,不再局限简单问答,接收业务目标之后自主拆解任务步骤,调用各类工具,处理文档、表格、浏览器自动化、数据查询,直接输出可交付的办公
1693 4
|
12天前
|
人工智能 安全 JavaScript
DeepSeek Harness开源Agent运行框架实战:4种安装方式、WebUI启动、插件管理与排坑全流程
随着AI Agent技术快速发展,单纯依靠大模型对话能力,很难完成复杂的自动化任务。模型需要具备读取本地文件、执行脚本、访问网页、操作文件系统、拆分复杂任务并分步执行的能力。DeepSeek Harness,简称DSH,是开源的AI Agent执行运行框架,遵循“Agent = 大模型 + Harness执行底座”的设计理念,为大模型提供一套安全可控的工具调用、任务编排、沙箱执行与插件扩展能力。它提供Web可视化界面与完整命令行工具,支持插件化扩展,能够让大模型自主拆解复杂需求,调用各类工具分步完成目标,无论是本地电脑调试,还是部署在云服务器上长期运行智能体任务都十分合适。本文为从0到1完整保
906 0
|
14天前
|
缓存 JSON API
阿里云千问Qwen3.8‑Max深度解析:核心能力、订阅计费规则、API接入配置与生产落地完整教程
Qwen3.8‑Max作为千问系列新一代MoE架构旗舰基座,总参数量达到2.4万亿,激活参数950亿,是面向复杂专业任务、长周期智能体、工程级代码开发、多模态深度解析的高阶大模型,原生支持文本、图像、视频多模态输入,最大上下文窗口达到百万Token,最大输出Token支持131072,内置深度思考推理链路,在编程、科研、法律金融专业分析、长视频文档解析、自主Agent任务等场景能力表现突出。很多开发者在项目前期直接接入该旗舰模型,却对模型能力边界、多种计费模式、订阅套餐权益、API参数配置、上下文缓存优化缺乏完整认知,出现成本失控、接口报错、长文本信息丢失、深度思考模式额外消耗大量Token等
982 3

热门文章

最新文章