最近朋友再群里提了一个问题,他们公司给他提供了一个获取数据的接口,在浏览器访问这个接口能获取到json数据,但是放在项目里使用ajax就产生了跨域问题,一般这个需要提供接口的后台方面需要做跨域处理,但是提供接口的不是他们公司的,然后就问大家有没有解决方案.

正好这几天看了一些关于node方面的知识,我跟他说,你可以让你们的后台做一个接口转发,用你们的后台去请求这个接口,然后在提供一个接口供你使用,相当于做了一个中转,因为服务器之间没有跨域,所以能够请求到数据.

然后他又问有没有另外的解决方法,感觉这个有点麻烦,然后我仔细想了想,突然想起了nginx解决跨域的办法,但是具体记不太清楚了,于是搜索相关的问题,网上给的资料很多,其实实现也很简单,就是使用nginx做一个反向代理,不过这个需要后台人员协助处理.具体步骤:

1.在安装了nginx的服务器中找到nginx.conf文件里的server{},如果没有找到的话就到该文件同级的conf.d文件夹里面的default.conf文件.

2.在里面添加如下代码

server
{
listen 80;
server_name www.aaa.top;
location / {
proxy_pass http://www.bbb.com;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
}
##### other directive
}

  其中www.aaa.com代表自己的域名,www.bbb.com代表的别人的域名,就是需要跨域的域名,然后添加上允许跨域的请求头,然后重启nginx就可以了.

这样的话请求www.aaa.com的接口就相当于请求www.bbb.com的接口了.

以上就是利用nginx做反向代理解决跨域的方法.

利用nginx做反向代理解决前端跨域问题的更多相关文章

  1. 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  2. nginx反向代理-解决前端跨域问题

    1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...

  3. nginx 配置反向代理解决请求跨域问题

    server { listen ; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; roo ...

  4. 使用nginx反向代理解决前端跨域问题

    1. 首先去Nginx官网下载一个最新版本的Nginx,下载地址:http://nginx.org/en/download.html.我这里下载的版本是:nginx/Windows-1.12.0.下载 ...

  5. 利用 Nginx 做反向代理解决微信小程序业务域名限制问题

    参考网站:(下述两个参考网站可以完美解决问题) https://www.jianshu.com/p/47eff6eeec25 https://www.cnblogs.com/kenwar/p/8288 ...

  6. 使用webpack-dev-server设置反向代理解决前端跨域问题

    webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.j ...

  7. Nginx反向代理解决iframe跨域问题

    前言 这几天有个需求:做个表单页面,要求后台人员能自定义发布表单,用户来填写表单.我一想,这不麦克表单有现成的吗,拿来就用!发布表单后,可以选择使用iframe方式嵌入网站,一切顺利. 当时的网站是h ...

  8. 【Nginx】在Windows下使用Nginx解决前端跨域问题

    提出问题:因为一些历史原因,后台代码不能动.请求别人的接口拿数据显示在前端,怎么办呢? 分析问题:通过ajax请求. 解决问题:因为浏览器的同源策略,所以需要解决跨域问题.(同源策略:请求的url地址 ...

  9. 简单配置nginx反向代理,实现跨域请求

    简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...

随机推荐

  1. Websocket @serverendpoint 404

    今天写一个前后端交互的websocket , 本来写着挺顺利的,但测试的时候蒙了,前端websocket发的连接请求竟然连接不上 返回状态Status 报了个404 ,然后看后台onError方法也没 ...

  2. 第一天Beta冲刺

    这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 <做个一亿的小项目> 这个作业的目标 完成第一天Beta冲刺 作业正文 .. ...

  3. 去除IntelliJ IDEA中重复代码报灰黄色的下划波浪线

    最近写Java在用IntelliJ IDEA这款传说中的神器IDE,看群里的大神们都在用,也耐不住寂寞想向大神们看齐一下.刚开始用,很多地方也不是很熟,今天遇到一个问题,导入一个项目后,看有些类里的代 ...

  4. Java之ExceptionHelper工具类

    import java.util.Map; import org.apache.commons.lang3.StringUtils; import org.apache.commons.lang3.e ...

  5. koa2+redis+jwt token验证,简单注册登录

    首先新建文件夹命名koa-server,npm init,相关包的安装就不说了,这是我的package.json 新建index.js文件,编码如下,config全局配置不用管,redis是一个简单的 ...

  6. vue项目,百度地图api高亮选取区域,高亮某个地区,行政区域等

    效果如下: var blist = [] ,maxZoom: });// 创建地图实例 var point = new window.BMap.Point(89.48,31.57); map.cent ...

  7. 什么是favicon.ico?

    ㈠定义 ⑴所谓favicon,即Favorites Icon的缩写,顾名思义,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站. ⑵根据浏览器的不同,Favicon显示也有 ...

  8. 创建基本的webpack4.x项目

    1.步骤 1)运行npm init -y 快速初始化项目 2)在项目根目录创建src源代码目录和dist产品目录,目录结构 webpack4.x-base |dist |src |index.html ...

  9. jQuery.getScript(url, [callback])

    jQuery.getScript(url, [callback]) 概述 通过 HTTP GET 请求载入并执行一个 JavaScript 文件.大理石平台精度等级 jQuery 1.2 版本之前,g ...

  10. 51 Nod 1163 最高的奖励

    1163 最高的奖励  基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 有N个任务,每个任务有一个最晚结束时间以及一个对应的奖励.在结束时间之前完成 ...