前端跨域

前端跨域

什么是前端跨域,可能很多人都不理解,前端跨域他主要牵扯的到的一个东西叫同源策略,同源策略指的就是,协议,域名,端口三个部分中的任意一个部分不相同就会出现跨域现象,同源策略是属于一种安全协议,但是又因为它的存在而导致了跨域,跨域会使我们拿不到我们想要的东西,所以我们就只能用其他的方式间接的解决了跨域。
1.前端有一些标签是不受跨域影响的:img link script iframe
2.服务器代理(反向代理):服务器代理又名反向代理,当我们要做反向代理的时候也需要一台后台的服务器,当我们客户端发送请求的时候,它会先发送到我们的代理服务器上,然后我们代理服务器会将我们发送来的请求接受到之后,在向另外一台服务器发送请求,在发送请求之前,他会改变请求的域名,协议,端口号,改变完之后它才会带着客户端发送过来的数据,进行请求,请求成功之后,在返回这边服务器返回的数据
3.jsonp: jsonp的原理是什么呢,jsonp主要运用到一个标签script,首先因为script标签他是不受跨域影响的,然后呢我们可以通过动态的创建script标签的方式拿到我们要的数据,通过在标签上面的src,在src上面传入地址的同时,在传入一个callBack函数,但是需要我们后端配合,我们后端收到callBack函数的时候他会帮我们调用,然后传入我们想要的数据,然后我们就可以callBack函数中拿到我们想要的数据。

前端页面需要向不同域名的服务器发送请求时,由于浏览器的同源策略限制,会导致跨域请求失败。为了解决这个问题,可以通过配置nginx来实现前端跨域。 下面是一种常见的nginx配置前端跨域的方法: 1. 打开nginx的配置文件,一般位于`/etc/nginx/nginx.conf`或`/usr/local/nginx/conf/nginx.conf`。 2. 在http块内添加以下配置: ``` http { ... server { ... location / { # 允许指定的域名进行跨域请求 add_header Access-Control-Allow-Origin *; # 允许指定的请求方法进行跨域请求 add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; # 允许指定的请求头进行跨域请求 add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; # 允许携带cookie进行跨域请求 add_header Access-Control-Allow-Credentials true; # 预检请求的有效期 add_header Access-Control-Max-Age 3600; ... } ... } ... } ``` 以上配置中,`add_header`指令用于添加响应头信息,实现跨域请求。其中: - `Access-Control-Allow-Origin`指定允许跨域请求的域名,可以使用通配符`*`表示允许所有域名。 - `Access-Control-Allow-Methods`指定允许的请求方法。 - `Access-Control-Allow-Headers`指定允许的请求头。 - `Access-Control-Allow-Credentials`指定是否允许携带cookie进行跨域请求。 - `Access-Control-Max-Age`指定预检请求的有效期,单位为秒。 配置完成后,保存并重启nginx服务,使配置生效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值