利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)

为什么会出现跨域?

造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题主要是针对js和Ajax的，

为保障浏览器安全。不同的域名, 不同端口, 不同的协议是不允许共享资源的，
解决跨域问题的常见方式

JSONP
iframe
...(此处省略N种)

首先得把Nginx下载到我们的电脑上来

戳=>ngin官网下载,选择Stable version(稳定版)中的 nginx/Window版进行下载(文件很小只有不到2M的大小的压缩包)
解压到自己喜欢的路径中(不包含中文)
打开conf文件夹->右键选择nginx.conf文件使用你喜欢的文本编辑工具打开
找到文件中的 server部分

编辑server内容为↓

 server {         listen       8088;#监听端口         server_name  localhost;#代理服务地址          #开始配置我们的反向代理         location /api{    #"/api"中的api可以替换为自定义的任何内容         rewrite ^/api/(.*)$ /$1 break;         include uwsgi_params;         proxy_pass http://localhost:9000; #我们要反向代理的地址,这里以本地的tomcat服务器为例         charset utf-8;   #显示中文             add_header 'Access-Control-Allow-Origin' '*'; #允许来自所有的访问地址             add_header 'Access-Control-Allow-Credentials' 'true';             add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS'; #支持请求方式             add_header 'Access-Control-Allow-Headers' 'Content-Type,*';     }  }

配置完成后,保存一下

最终我们ajax请求的url路径就可以使用:

http://localhost:8088/api 完美代替实现跨域访问=> http://localhost:9000 上的资源
常用nginx命令

(在解压目录中打开cmd控制台窗口(可直接站资源管理器路径的url输入框中输入cmd即可直接在解压目录打开))

start nginx.exe //启动nginx nginx.exe -s reload //重载配置并重新启动 nginx.exe -s stop //快速停止 nginx.exe -s quit //完整有序停止

解决跨域问题demo

举个栗子

//一种出现跨域问题的场景 //HTML文件直接通过本地路径加载 如url:file:///D:/demo/page/index.html //其中关联的js代码为 const baseUrl="http://localhost:9000/testDemo/"; $.ajax({     url:baseUrl+"test/hello",     type:"GET",     success:(res)=>{         console.log(res);     } })

正常情况下(没有跨域问题),将会在浏览器控制台中输出res中的内容,而实际情况是↓
解决方案

按照前面的步骤完成配置后只需改变代码中 baseUrl的值,即可进行舒服的跨域请求操作

//改变后的baseUrl const baseUrl="http://localhost:8088/api/testDemo/"

标签

ajax

nginx

localhost