最近朋友再群里提了一个问题,他们公司给他提供了一个获取数据的接口,在浏览器访问这个接口能获取到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. 原来你是这样的 jsonp(原理与具体实现细节)

    前言 原文地址 仓库地址 jsonp(JSON with padding)你一定不会陌生,前端向后端拿数据的方式之一,也是处理跨域请求的得利助手. 我们早已习惯,早已熟练了jQ或者zepto的ajax ...

  2. ingress部署

    # 手动部署 # 部署ingress-nginx 官方地址:https://github.com/kubernetes/ingress-nginx # 参考链接:https://www.jianshu ...

  3. Java-Base64工具类

    /* * Base64 encoding and decoding. * Copyright (C) 2001-2004 Stephen Ostermiller * http://ostermille ...

  4. 【学习备份】ajax添加小例子

    实现目的:保存模板编号.模板名称到数据库 1.js引用 <script src="../../../../../../../js/jquery-1.10.2.min.js"& ...

  5. 2019CCPC秦皇岛(重现赛)-D

    链接: http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1004&cid=872 题意: 给定一个正整数 n,要求判断 1 ...

  6. vue路由跳转push,replace,go

    this.$router.replace({  path: "/subpagest" });//不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 his ...

  7. Python基础之Python解释器

    当我们在编写Python代码时,我们得到的是一个包含Python代码的,以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件. 由于整个Python语言从规范到解释器都是开 ...

  8. Makefile简单编写实例

    介绍一下Makefile的简单编写例子. 编写Makefile的规则就是: 目标文件:依赖文件 (tab)编译规则 现在我有一个文件目录结构为: 解释一下这几个文件.首先我创建makefile目录,底 ...

  9. docker之CPU配额参数的混合使用

    在启动容器的时候有很多参数,这里来实践一下与CPU相关的参数. 实例: 创建两个容器,docker10.docker20,让两个容器只运行在CPU0上,然后测试CPU使用率. [root@openst ...

  10. vue 打包部署到服务器上 配置nginx访问

    坑一 css,js资源引入不正确 webpack配置文件config/index.js 需要更改: 方法一 当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static文件夹当成了根 ...