跨域问题

为什么会产生跨域?

由于浏览器的限制,不同协议,域名,端口的请求都会产生跨域。

协议:http https 属于不同的协议

域名:www.baidu.a.com    www.baidu.b.com   属于不同的域名

端口:localhost:3000    localhost:8080 属于不同的端口

解决跨域问题

1、jsonp方法:

在引用外部的CDN的时候,比如jquery,bootstrap,或者图片的src都可以使用src的标签,这时请求不会被拦截,因此,jsonp可以说是利用了这样的一个漏洞,使用script标签的方法,发送请求,请求头中包含一个回调函数,回调函数的参数带回来了请求的数据。

缺点:只支持get方法

$('#btn').click(function(){

    var frame = document.createElement('script');

    frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';     $('body').append(frame);



后台的相关处理

如果使用jquery的方法,只需要在$ajax中将dataType写为jsonp

2、proxy

这是在前端里配置文件中处理,vue-config.js,在根目录下,和src平级

在devServer中配置proxy,

/double:是指请求头的共同的头部信息,比如

/double/showEnterpriseInfo  /double/showStudent  /double/invite

这样就把共同的请求头拿出来写在这

target:指的是你发送请求后台接口的地址

changeOrigin:开启代理,这样发送请求的时候在请求头会加上相应信息,后台识别,开启连接

缺点:一些老的浏览器不支持这个方法

优点:支持所有的http协议

3、node中的cors

采用中间件的方法,注册并使用中间件

实现方法:

安装 npm i node-cors

const cors=require('cors')

app.use(cors)

cors分为简单请求和非简单请求

简单请求一般都有包含以下方法和字段

head post get 方法

字段:

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

对于简单请求,浏览器直接发出CORS请求。具体来说,就是在头信息之中,增加一个Origin字段。

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。

非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

https://www.cnblogs.com/knowledgesea/p/6808411.html

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器在请求不同域的资源时,会因为同源策略的影响请求不成功,这就是通常被提到的“跨域问题”。作为前端开发,解决跨域...
    SCQ000阅读 2,601评论 1 52
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 830评论 0 0
  • 跨域问题的场景和解决方案多种多样,只要是做前端开发,总会遇到。而且面试时也是必问的问题。所以自己学习总结记录一下。...
    花开_陈凤娟阅读 740评论 0 0
  • 做过 web 开发的同学,应该都遇到过跨域的问题,当我们从一个域名向另一个域名发送 Ajax 请求的时候,打开浏览...
    强哥科技兴阅读 452评论 0 1
  • 一高初中部隆重举行2018-2019学年度第二学期工作总结会 凝神聚力,务实苦干结硕果;创新进取,敢于亮剑赢佳绩。...
    平语心声阅读 268评论 0 2