别往下翻了,三句话说清楚跨域资源请求报错的由来
工作中很多同学老是遇到跨域的问题,比如这样的报错
Access to XMLHttpRequest at ' 'http://test.com.cn/get' from origin 'http://local.com.cn:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
其实判断是否跨域很简单
只有协议、域名、端口全部相同才算同一域下,其余情况都存在跨域!
所谓协议:https和http
所谓域名:test.com.cn和ai.test.com.cn也是不一样的
所谓端口:80端口和8080端口自然也是不一样的
当然,跨域不一定会有跨域问题。
因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是于当前页同域名的路径,这可以有效组织跨站攻击。也就是说,跨域问题是针对ajax的限制,是浏览器的自我保护行为。
【别往下翻了,三句话说清楚跨域资源请求报错的由来】通常情况下我们都是使用cors解决跨域,这里需要后端的开发同学做一些配置。
针对简单和复杂请求,又分两种处理方式。这个我们明天专门写一篇文章。
ps:CORS,是 HTML5 的一项特性,它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。
后台可以添加头不信息与前端相互对应,前端发送请求与后台控制的权限进行相互比较,从而获取到后台的相关权限,这样就没有跨域问题了。
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例