前端跨域问题
2020/3/17 11:01:26
本文主要是介绍前端跨域问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
B/S架构的项目中前端经常会遇到跨域问题,什么是跨域问题,常用的解决方法又有哪些呢?可能大多数人对跨域问题都只是一知半解吧。
跨域问题的表现
先来说说那么到底什么是跨域?跨域是指一个域下的文档或脚本去请求另一个域下的资源。跨域问题则是指浏览器出于安全考虑而需要遵循同源策略,限制不同源的网站的文件的执行,同源指的是“协议+域名+端口号”都相同。
如果非同源,如下三种行为会受到限制:
- 无法获取非同源网页的cookie、localstorage和IndexedDB
- 无法访问非同源网页的DOM(iframe)
- 无法向非同源地址发送AJAX请求(可以发送,但浏览器拒绝接受响应)
必须明确以下几点:
- 跨域问题只存在于浏览器中,而在C/S架构中,如App中是不存在跨域问题的。
- 浏览器的同源策略并不限制请求的发送,跨域时不同域的服务器是能收到请求的,但浏览器拒绝接受响应,如下图。
那么为什么浏览器才有跨域问题而App不会存在跨域问题呢?很简单,app是自家的,所有的请求都是到自家的服务器,而浏览器是可以访问很多网站的,每个网站都可以带有cookie等信息,如果被其他恶意网站利用,后果不堪设想。
跨域解决方案
跨域的解决方案很多,有如下几种:
常用的方案有:
- 跨域资源共享(CORS)
- Nginx代理跨域
- JSONP
跨域资源共享CORS
CROS全称是跨域资源共享(Cross-origin resource sharing),它的提出就是为了解决跨域请求的。跨域资源共享(CORS)标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。
对于简单请求服务器配置后直接接受请求,对于对那些可能对服务器数据产生副作用非简单的HTTP请求方法(特别是GET以外的HTTP请求,或者搭配某些MIME类型的POST请求),浏览器必须首先使用OPTIONS方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。
我们上面说过,浏览器跨域时其实请求已经发送到服务器了并返回了结果,那如果服务器配置了是允许跨域的,浏览器是否就会放行呢?答案是肯定的,当浏览器拿到响应头Access-Control-Allow-Origin: *
时,会匹配其中的允许跨域的网址是否有自己,有的话则接收响应执行。如下,我在服务端Spring Boot配置了注解,成功跨域。
服务端配置:当然你可以配置成全局的,不用每个类都写注解
响应如下:
Nginx代理跨域
CORS除了上面简单使用Spring Boot注解配置外,还可以使用Nginx配置。如下,对于非简单请求,浏览器总共会发两次请求,第一次是预检请求OPTIONS。
location / { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; if ($request_method = 'OPTIONS') { return 204; } } 复制代码
JSONP
JSONP的原理是利用了
这篇关于前端跨域问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程