跨域
什么原因导致了浏览器报跨域错误
发起ajax请求的那个页面的地址 和 ajax接口地址 不在同一个域中
跨域错误是由于 不同源的ajax请求导致的
同源: 协议相同 , 域名相同 , 端口相同
跨域的请求是正常能发送的,服务器也能正常响应,但浏览器觉得不安全。跨域问题出现的基本原因是浏览器的同源策略。同源策略是一个重要的安全策略,它限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。
解决思路:
请求响应双方url不同源
- 服务器代理
- 请求是ajax 改发JSONP
浏览器觉得不安全 (后端还是能收到请求的)
- 可以安装一个浏览器插件
allow-control-allow-origin绕过同源策略。 - 用postman软件测试
- CORS
错误原因:不同源的ajax请求
后端还是能收到请求的,错误是发生在浏览器端
cors:
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出
XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10(ie8通过XDomainRequest能支持CORS)。
跨域报错信息:
出现跨域不要慌,一般后端只需要简单设置一下就可以正常请求了,在nodejs中,可以通过以下方法:
1.手动实现
通过在被请求的路由中设置header头,可以实现跨域。
app.get('/get', (req, res) => {
// * 表示允许任何域名来访问
res.setHeader('Access-Control-Allow-Origin', '*')
res.send({msg:'ok'})
})
不过这样所有的接口都需要手动设置,比较麻烦,推荐第二种
2.使用cors
- 它是一个npm包,要单独下载使用 npm 包 cors
npm i cors - 当做express中的中间件,注意代码应该放在顶部
只需要添加两行代码即可保证,你写的所有接口,都能正常请求
const cors = require('cors')
app.use(cors())
jsonp:
是一种借助于
script标签发送跨域请求的技巧。它本质并不是ajax请求,所以没有跨域问题。
原理:
- script的src属性可以请求外部的js文件,这个请求不是ajax,它没有跨域问题。
- 借助
script标签的src请求服务端上的接口。<script src="http://localhost:3000/get" - 服务端的接口返回JavaScript 脚本,并附上要返回的数据。例如:
res.end("fn(数据)")
注意:
1.前端提前准备的函数名,必须与后端传过来的函数名一致
2.两者顺序不能变,相当于js的引入顺序,是先引入一个 函数声明fn(形参),之后从后端接收到 函数的调用 fn(实参)
3.jsonp只支持get请求,原因是用到的原理是,用的script的src属性,只能获取外部资源(get请求)