资讯专栏INFORMATION COLUMN

其实我只想设置客户端实现跨域请求

Lucky_Boy / 1971人阅读

摘要:本地也可以轻松模拟跨域请求,以及解决跨域请求的方式轻松实现本地服务器跨域请求请求接口,其实它们都在相同的本地服务器目录下以访问页面,可是这个页面调用的接口地址是与域名不同,也即跨域解决跨域请求服务器端设置这样就能轻松实现跨域请求

本地也可以轻松模拟跨域请求,以及解决跨域请求的方式
1、轻松实现本地服务器跨域请求

web.html请求接口json.json,其实它们都在相同的本地服务器目录下

localhost/cors/web.html访问页面,可是这个页面调用的接口地址是http://127.0.0.1/cors/json.json

var url = "http://127.0.0.1/cors/json.json"
fetch(url)
    .then(res => res.json())
    .then(resJson => console.log(resJson))

localhost127.0.0.1域名不同,也即跨域

2、解决跨域请求(服务器端设置Access-Control-Allow-Origin:*
//js
var url = "http://127.0.0.1/cors/php.php"
fetch(url)
    .then(res => res.json())
    .then(resJson => console.log(resJson))
    
//php
header("Access-Control-Allow-Origin:*");
echo "{"name": "lofayo"}";

(这样就能轻松实现跨域请求)

3、解决跨域请求(服务器端设置Access-Control-Allow-Origin:http://localhost

(服务器端设置响应头 Access-Control-Allow-origin: *,允许了任何来源origin的访问,其实这个地方可以设置和请求头相同的origin的值,只是这样设置太麻烦了,本地测试需要服务端设置一次,如果本地测试同一个接口由多人请求,还要设置多次,正式上线了还要设置一次,太麻烦了)

//js  http://localhost/cors/web.html
var url = "http://127.0.0.1/cors/php.php"
fetch(url)
    .then(res => res.json())
    .then(resJson => console.log(resJson))

//发起该请求,会在请求头里自动设置origin字段值为当前页面,如:origin:http://localhost


//php
//服务器端设置和origin相同的值
header("Access-Control-Allow-Origin:localhost");
echo "{"name": "lofayo"}";

(虽然能实现,一个接口从测试到上线需要服务器端多次设置,太麻烦了)

4、跨域请求jsonp(理解jsonp原理)

jsonp的实现分三步走:

1、本地js定义好回调函数

2、创建可以跨域请求的script标签,其实src即为带了回调函数查询参数的接口url

3、在php的接口文件里获取回调函数,并返回由回调函数包裹数据的整体

//1、定义好接收数据的函数


//2、通过script标签的src实现跨域,只是这个url带有查询参数(回调函数)



//php文件接收查询参数,并返回由回调函数包裹数据的整体
$requstName = $_GET["callback"];
$data = "{"name": "lofayo"}";
echo $requstName . "(" . $data . ")";
5、跨域请求自我畅想(设置请求头里origin字段值和服务器相同)

所有上述跨域请求,都需要服务器端的参与设置,叨扰别人的事终究还是麻烦了些。想实现的是,即使服务器端不允许跨域,但是仅仅在客户端设置依然能够实现的跨域请求

比如:接口数据在http://127.0.0.1/cors/php.php

访问页面地址为:http://localhost/cors/web.html,该页面请求的接口,浏览器会在请求头里默认设置:

Origin:http://localhost
Referer:http://localhost/cors/web.html

既然如此,我只需要手动模拟origin字段值,把他设置为和服务器相同的域不就可以了,设置origin字段值:

Origin:http://127.0.0.1

可事与愿违,在http请求里设置不了该字段的值

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94929.html

相关文章

  • 20K前端大佬面试(关于如何回答ajax跨域问题)

    摘要:在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。 在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。关于跨域,有N种类型,现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍),内容...

    Yangyang 评论0 收藏0
  • 20K前端大佬面试(关于如何回答ajax跨域问题)

    摘要:在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。 在接触前端开发起,跨域这个词就一直以很高的频率在我们学习工作中重复出现,最近在工作中遇到了跨域的相关问题,这里我把它总结记录一下。关于跨域,有N种类型,现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍),内容...

    stackfing 评论0 收藏0
  • 移动前端系列——websocket实时互动小游戏

    摘要:转移动前端系列实时互动小游戏原本是想在写这文章之前,给大家来个二维码,让大家来感受一下我那个狂拽酷炫叼炸天的实时互动小游戏,无奈一直没有找到一台足以住其气场的服务器。 转 移动前端系列——websocket实时互动小游戏 原本是想在写这文章之前,给大家来个二维码,让大家来感受一下我那个狂拽酷炫叼炸天的实时互动小游戏,无奈一直没有找到一台足以hold住其气场的服务器。所以,此处可能需要...

    awkj 评论0 收藏0
  • 爬取博客园首页数据进行数据分析

    摘要:目标选取了博客园,爬取了首页的前页文章,但是数据放在那一直没去分析。为了避免对博客园造成压力,爬虫代码不公开。注数据来源是年月日至月的博客园首页文章。谁是博客园最爱的用户最爱的用户,在这里是按文章上首页的数量来判断的。 前言 之前折腾了一小段时间scrapy,觉得使用起来异常简单,然后打算练练手。目标选取了博客园,爬取了首页的前200页文章,但是数据放在那一直没去分析。趁着现在有闲心,...

    zilu 评论0 收藏0
  • 赚钱:停更是不可能停的,但是有时候你不得不停。

    摘要:,在互联网上赚钱,没有所谓的工作日,没有所谓的休息日。任何一个项目没有赚到钱之前,即使做不到,是一个必须的状态。但是很多人舍不得,或者不懂得如何拼时间和精力。最典型的一个人,他一直认为们之所以不能成功,是因为他们不够努力。 ...

    Cristic 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<