反向代理实现跨域请求conf文件配置

这是豆瓣电影top250的api:https://api.douban.com/v2/movie/top250
直接在浏览器访问是这样的

反向代理实现跨域请求conf文件配置_第1张图片
说明接口是没问题的

直接用ajax去请求接口看看
反向代理实现跨域请求conf文件配置_第2张图片
js代码

结果如下
不同域,存在跨域问题

结果出错了,因为存在着跨域问题,跨域是不能直接调接口的,需要进行处理。
这里用的是nginx做的反向代理来实现的跨域
1.首先下载并安装的 nginx服务器,下载地址: http://nginx.org/en/download.html,傻瓜式下一步下一步安装。
2.找到自己安装的目录位置,我是安装到d盘的 D:\nginx\nginx-1.12.0,我的版本是 nginx-1.12.0
反向代理实现跨域请求conf文件配置_第3张图片
安装好了,目录文件如图!

3.可以直接双击nginx.exe文件,也可以通过命令行工具启动,启动命令是start nginx

反向代理实现跨域请求conf文件配置_第4张图片
可以在`nginx`根目录下,按住`shift键 `+鼠标右键,找到`在此处打开命令窗口`

4.在浏览器里面输入 localhost回车,出现如下页面即为成功安装并启动了 nginx
反向代理实现跨域请求conf文件配置_第5张图片
启动成功页面

5.现在打开配置文件,设置反向代理,配置文件在 D:\nginx\nginx-1.12.0\conf\nginx.conf
反向代理实现跨域请求conf文件配置_第6张图片
nginx.conf文件部分截图

6.反向代理配置如下
反向代理实现跨域请求conf文件配置_第7张图片
配置完毕

7.保存一下文件,在命令行里面输入 nginx -s reload,重启下服务
反向代理实现跨域请求conf文件配置_第8张图片
重启服务

8.修改下求情地址,再试一下
反向代理实现跨域请求conf文件配置_第9张图片
更改接口后的js代码

反向代理实现跨域请求conf文件配置_第10张图片
已经可以正确返回结果了

9.我们还可以将刚刚在 nginx.conf里面写的东西,放到另一个文件里面,我们只需要在使用的时候,将其引入就好了。 nginx.conf里面的代码如下:
反向代理实现跨域请求conf文件配置_第11张图片
nginx.conf配置

我是在 nginx-1.12.0\conf\douban\douban.conf下新建的
反向代理实现跨域请求conf文件配置_第12张图片
新建配置文件目录位置

douban.conf内容如下:

反向代理实现跨域请求conf文件配置_第13张图片
就是之前的内容复制过去

你可能感兴趣的:(反向代理实现跨域请求conf文件配置)