最近朋友再群里提了一个问题,他们公司给他提供了一个获取数据的接口,在浏览器访问这个接口能获取到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. Vue-指令补充、过滤器、计数器属性、监听属性

    vue实例成员: el | template |data | methods watch 监听事件| computed 计数属性使用 | filters过滤器 | props 父传子 componen ...

  2. 四 java web考点

    一.GET和POST区别(参考Servlet&JSP学习笔记) <form>中method属性默认为GET. 1.使用POST的情况 GET跟随URL之后,请求参数长度有限,过长的 ...

  3. 【Python之路】特别篇--Redis

    NoSQL(NoSQL = Not Only SQL ),意即“不仅仅是SQL”,泛指非关系型的数据库 随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站,特别是超大规模和高并发 ...

  4. Object.keys 返回由一个给定对象的自身可枚举属性组成的数组

    在实际开发中,我们有时需要知道对象的所有属性, 原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组 http://blog.csdn.net/u014035151/ar ...

  5. luoguP3371 【模板】单源最短路径

    P3371 [模板]单源最短路径 3K通过 10.7K提交 题目提供者 HansBug 标签 云端↑ 难度 普及/提高- 时空限制 1s / 128MB 题目描述 如题,给出一个有向图,请输出从某一点 ...

  6. noi.ac NOI挑战营模拟赛1-5

    注:因为博主是个每次考试都爆零垫底的菜鸡,所以此篇博客很有可能咕咕咕 (指只贴AC代码不写题解的......如果我真的不会做的话,就不能怪我了qwqwq) Day1 T1 swap 23pts 从一个 ...

  7. matlab中setdiff

    源自:http://www.w2bc.com/Article/16709 matlab中setdiff()函数作用:判断2个数组中不同元素 c = setdiff(A, B) 返回在A中有,而B中没有 ...

  8. PTA 阶乘之和取模

    阶乘之和取模 (25 分) 输入正整数n, 计算S = 1!+2!+...+n!的末6位(不含前导0). 这里1<=n<=10​9​​. 输入样例: 例如输入: 20 输出样例: 输出: ...

  9. 25.Python逻辑运算符及其用法

    逻辑运算符是对真和假两种布尔值进行运算(操作 bool 类型的变量.常量或表达式),逻辑运算的返回值也是 bool 类型值. Python 中的逻辑运算符主要包括 and(逻辑与).or(逻辑或)以及 ...

  10. Codeforces Round #567 (Div. 2) E2 A Story of One Country (Hard)

    https://codeforces.com/contest/1181/problem/E2 想到了划分的方法跟题解一样,但是没理清楚复杂度,很难受. 看了题解觉得很有道理,还是自己太菜了. 然后直接 ...