关于跨域的处理的几种方法的整理

跨域是经常遇到的这里不再说跨域什么意思了，协议不同，端口不同，域名不同是为跨域；

解决方法：

1，前端采取jsop来获取数据

代码示例：此处后台是node.js简单实现，页面端口localhost：3020

前端：$(function(){    $("#btn").click(function(){        $.ajax({            method:"get",            url:"http://127.0.0.1:3022/app/jsonp",//这里服务端端口是3022，跨域            dataType:"jsonp",//数据类型是jsonp            jsonp:"callback",//参数为callback            success:function(data){                console.log(data.name)            }

        })    })})后端node.js

var express=require("express");var app=express();app.use(express.static("./"));app.get('/app/jsonp',function(req,res,next){    res.jsonp({name:'lyz'});//注意此处格式必须是jsonp，各个语言可能写法不同});

app.listen(3022,function(req,res){

 console.log(2) })原理分析：人们加载任意地址的js文件都有效果，于是到把数据放到js里面，然后让前端调取，jsonp只对get有效，post无效的；

2 xhr2这是html5新产生的ajax2，衍生出来的，于是在一些浏览器上是无效的；这方法就是直接在服务端设置，本方法可以post，get都行header('Access-control-Allow-Origin:*'）

前台代码

$.ajax({    method:"get",    url:"http://127.0.0.1:3022/app/jsonp",    success:function(data){        console.log(data)    }

})

这里如果前端是非简单请求(方法不是get，post，或者content-type不是formdata，formurlencode)，那么会多个options嗅探，如果服务器返回支持跨域，则继续请求如果是简单请求，则直接请求，同时header上附加origin后台代码

var express=require("express");
var app=express();
app.use(express.static("./"));
app.get('/app/jsonp',function(req,res,next){
res.setHeader('Access-control-Allow-Origin','*');注意这里*号是所有域名都可以访问，即通配原则，如果要某特定域名访问，可单独设置
res.send("2")
});

app.listen(3022,function(req,res){

console.log(2)
})

转载于:https://www.cnblogs.com/lyz1991/p/5353201.html

关于跨域的处理的几种方法的整理相关推荐

JS 跨域问题常见的五种解决方式
JS 跨域问题常见的五种解决方式一.什么是跨域? 要理解跨域问题,就先理解好概念.跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来 ...
跨域错误的原因及处理方法
在开发网站时通过框架或是浏览器的 fetch.XHR 请求过外部 API,那么一定遇到过跨域请求,还有错误信息:今天来讨论跨域问题的原因及解决方法. 跨域请求跨域是开发过程中必定遇到过的问题,当通过 ...
MVP遇到GMCT:不加入域更改密码有几种方法？
以下是对一个问题的转载,我有自己的测试解决方案了: "MVP遇到GMCT:不加入域更改密码有几种方法? 这是我和侯红旗老师聊天的时候,提出的问题.不愧是金牌讲师,很快就说出了三种方法: 1. ...
跨域产生的原因及解决方法
跨域产生的原因及解决方法参考文章: (1)跨域产生的原因及解决方法 (2)https://www.cnblogs.com/keai/p/11418138.html 备忘一下.
Web 之 html 如何显示隐藏Html元素的两种方法简单整理
Web 之 html 如何显示隐藏Html元素的两种方法简单整理目录 Web 之 html 如何显示隐藏Html元素的两种方法简单整理一.简单介绍二.实现原理三.注意事项四.代码示例一.简 ...
KSO-.NETCore中实现跨域的代码以及几种跨域方式
跨域指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域,同源策略(Sameoriginpoli ...
跨域问题常用的三种解决方式
一.什么是跨域?跨域是如何产生的? 同源策略: 浏览器内置的规则!是浏览器提供的一种安全机制,限制来自不同源的数据.如果当前页面的URL地址和Ajax的请求地址不同源,浏览器不允许得到服务器的数据: ...
跨域问题详解——九种解决跨域方法
跨域是前端再常见不过的问题了,下面主要针对跨域做一次总结,一次理清楚. 一.jsonp解决跨域 jsonp解决跨域问题的原理是:script不受同源策略的影响. //前端代码: <!DOCTYP ...
jQuery中通过JSONP来跨域获取数据的三种方式
第一种方法是在ajax函数中设置dataType为'jsonp' $.ajax({dataType: 'jsonp',url: 'http://www.a.com/user?id=123',succe ...
跨域问题的产生及解决方法
域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation).信任关系是连接在域与域之间的桥梁.当一个域与其他域建立了信任关系后,2个域之 ...

关于跨域的处理的几种方法的整理

关于跨域的处理的几种方法的整理相关推荐

最新文章

热门文章