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

Lucky_Boy 发布于2019-08-22 17:10 / 2096人阅读

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

本地也可以轻松模拟跨域请求，以及解决跨域请求的方式

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))

localhost 与127.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请求里设置不了该字段的值

GPU云服务器云服务器我只想跨域请求跨域请求方式 javascript跨域请求

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

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

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

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

Yangyang 2019-08-02 16:09 评论0 收藏0
爬取博客园首页数据进行数据分析

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

zilu 2019-07-30 14:40 评论0 收藏0
赚钱：停更是不可能停的，但是有时候你不得不停。

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

Cristic 2021-10-14 09:43 评论0 收藏0