ajax请求怎么实现跨域

讲讲ajax怎么跨域的问题

本人第一次使用markdown发布东西，用的不太熟，不要见怪2333

ajax跨域问题的出现

这个问题其实很常见，当你使用本地的api当做数据库的接口的时候，比如使用node搭建的服务器的端口是 http://localhost:8888，这个时候，你运行项目（Vue，React）的地址为 http://localhost:3000 （一般情况下，使用 create-react-app构建的项目的默认端口是 3000 端口，使用 vue-cli 构建的项目的默认端口一般是 8080 端口），这个时候，一旦你使用向服务器发送 ajax 请求，就会遇到跨域的问题
这是因为浏览器的同源原则，同源就是 同一协议，同一域名，同一端口，只有同源的地址之间才可以相互访问资源，浏览器不会阻止，但是一旦不是同源的，那么浏览器就会阻止，也就是说，一旦你访问别的源的资源的时候，浏览器会阻止，这就是 跨域问题
很明显，服务器的地址和项目的地址不是同源的，所以发生 跨域问题 也是很正常的

跨域的解决方法

jsonp
CORS
代理

jsonp

jsonp 的全名就是 json with padding ,通俗来讲就是 带有回调函数的json，这个翻译我是借鉴 高性能javascript 里的，是通过 动态脚本向服务器发送请求 来获取数据的，具体是这么操作的：

//1. 创建一个  script  标签
const script = document.createElement("script")
script.type = "text/javascript"
//2. 创建一个回调函数
function getValue(value){console.log(value)
}
//3. 向服务器发送请求
script.src = "http://localhost:8888/lisi?callback=getValue"
//4. 将 script标签 添加到head（或者 body标签）里边
const head = document.getElementsByTagName("head")[0]
head.append(script)

后端的代码为（我是用 node ，结合 koa 框架）：

router.get("/lisi",async ctx=>{console.log("is -- get")const lisi = {name:"lisi",age:34,job:"student"}// 【注意】但会数据的时候，要记得使用把数据变成 json格式（即 使用 JSON.stringify(data)）ctx.body = ctx.query.callback+`(${JSON.stringify(lisi)})`
})router.post("/lisi",async ctx=>{console.log("is -- post")const lisi = {name:"lisi",age:34,job:"student"}// 【注意】但会数据的时候，要记得使用把数据变成 json格式（即 使用 JSON.stringify(data)）ctx.body = ctx.query.callback+`(${JSON.stringify(lisi)})`
})

之所以会设置 get 和 post 是因为要验证 jsonp 是通过 get 请求发送数据的，测试结果如下：
可以看见 jsonp 是 get 请求，其实不难理解，因为 script 标签的 src 属性就是以 get 请求的方式获取数据的，因此 jsonp 是 get 请求没毛病

CORS

cors 的全称是 Cross-origin resource sharing（跨域资源共享），其实很简单，就是在服务器后端里给所有的来源加上一个响应头就可以了，怎么加呢？如下：

router.use(async (ctx,next)=>{ctx.res.setHeader("Access-Control-Allow-Origin","http://localhost:3000")await next()
})

指定的允许访问的源不一定就是 http://localhost:3000，这个要看你的项目而定，不过我这个react项目因为是通过 create-react-app 构建的，所以是默认的 3000 端口
我在 app组件里使用 axios 发送请求，代码如下：

componentWillMount(){axios.get("http://localhost:8888/zhangsan").then(res=>{console.log(res.data)}).catch(err=>{console.log(err)})}

控制台测试结果：
如果你不使用 cors 方法，那么控制台会输出：

这就是跨域问题

代理

这个方法我实在 vue里使用过，就是使用代理服务器帮客户端向服务器发送请求，然后把从服务器获取的数据返回给客户端， 现在要新建一个vue项目就为了实现这个代理感觉划不来，这个方法有时间我再回来补充2333

ajax请求怎么实现跨域相关推荐

java接口允许ajax访问_服务允许AJAX请求，允许跨域请求
当工作时间,因为需要JS 进行AJAX请求,这时候存在跨域问题,当出现这种情况时,有多种方案解决比如使用JSONP,也有一种简单的方式,就是在过滤器里面增加返回请求允许跨域head配置. 代码如下: ...
js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...
AJAX请求及解决跨域问题
AJAX 介绍 AJAX其实就是异步的js和xml 通过ajax可以在浏览器中发送异步请求.最大优势:无刷新获取数据优点: 1.可以无需刷新页面与服务器进行通信 2.允许根据用户事件更新部分页面内容 ...
ajax请求在线库,跨域 jQuery库ajax请求
无法安装Windows Live“OnCatalogResult:0x80190194"错误的解决方法今天想安装一个博客客户端,结果安装一直报错"OnCatalogResult: ...
【Ajax】Ajax全面讲解、跨域与JSONP及了解HTTP
Ajax 一.初识Ajax 1.1 URL地址 1.1.1 URL地址组成部分 1.2 客户端与服务器的通信过程 1.3 网页中如何请求数据 1.4 资源的请求方式 1.5 Ajax的概念 1.6 j ...
php p3p跨域登录,php+ajax实现多域名跨域登录例子(基于P3P)
在以前如果我们要实现php+ajax实现多域名跨域登录的话很多朋友都碰到无法正常跨域登录问题,下面我来给大家解决跨域名登录问题,有需要的参考. 该同步登陆需求需满足以下三个关键点: 1)A域名下登陆的 ...
php跨域请求解决方案_swoft2 -跨域与中间件详解
本方案用于开发环境,在生产环境不建议使用,生产环境可以使用 nginx 的反向代理一.什么是跨域? 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS ...
html跨域post请求,使用fetch跨域POST请求
首先,直接上代码: var url='http://localhost/test'; fetch(url, { method: "POST", mode: "cors&q ...

ajax请求怎么实现跨域

讲讲ajax怎么跨域的问题

ajax跨域问题的出现

跨域的解决方法

jsonp

CORS

代理

ajax请求怎么实现跨域相关推荐

最新文章

热门文章