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

时间:2022-09-30 19:36:36

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

前言

  1. 为什么会出现跨域?

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

同源策略

为保障浏览器安全。不同的域名, 不同端口, 不同的协议是不允许共享资源的,

  1. 解决跨域问题的常见方式
  • JSONP
  • iframe
  • ...(此处省略N种)
  • 使用代理(文章主要讲到的方法)

进入今天的主题(-)

使用Nginx反向代理实现ajax进行跨域访问

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

戳=>ngin官网下载,选择Stable version(稳定版)中的 nginx/Window版进行下载(文件很小只有不到2M的大小的压缩包)

  1. 解压到自己喜欢的路径中(不包含中文)

    利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
  2. 打开conf文件夹->右键选择nginx.conf文件使用你喜欢的文本编辑工具打开

    利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
  3. 找到文件中的 server部分

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

    编辑server内容为↓
 server {
listen 8088;#监听端口
server_name localhost;#代理服务地址 add_header Access-Control-Allow-Origin *;
client_max_body_size 1024m; #文件上传大小限制
underscores_in_headers on; #去掉过滤header的下画线
location / {
root D:\documents\Competition\labManage\equipmentWeb;#根目录!!,把这里路径设置为项目的根路径
autoindex on; #开启nginx目录浏览功能
autoindex_exact_size off; #文件大小从KB开始显示
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,*';
} #开始配置我们的反向代理
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,*';
} }
  1. 常用nginx命令

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

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

start nginx.exe //启动nginx
nginx.exe -s reload //重载配置
nginx.exe -s stop //快速停止
nginx.exe -s quit //完整有序停止
  1. 配置完成后,保存一下

如果已经打开Nginx,请使用命令重载配置,①停止->②重载配置->③启动

  • 重要!在浏览器中输入 http://localhost:8088/ 即可访问配置文件中设置的根目录项目的资源,如果出现404(网页无法显示)说明配置不正确,或者修改的配置文件还没有生效,按上述重载步骤操作一下

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

  • 注意!此时如果使用file:///D:/xxxx.html 本地文件路径虽然能访问xxx.html资源文,但仍然不能进行跨域访问资源的访问

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

    只有通过 http://localhost:8088/ 打开对应的xxx.html文件才能进行跨域操作,不会被浏览器拦截

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

    因为通过这个地址预览到的HTML文件和请求路径都在 http://localhost:8088/ 这个域中,

  • 最终我们js代码里的ajax请求的baseUrl路径就可以使用:

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

  1. 解决跨域问题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中的内容,而实际情况是↓

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

    不用看我这里的的请求url,我只是举个 跨域警告的栗子

  • 解决方案

按照前面的步骤完成配置后只需改变代码中 baseUrl的值,然后通过 http://localhost:8088/xxxx.html 访问静态资源,即可进行舒服的跨域请求操作

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

教程到此结束,如有任何疑问,或者不明白的地方,请在评论区留言,或者私信/发邮件

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

  1. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  2. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  3. Ajax之跨域请求

    一.引子 我现在开启了两个django项目,分别叫Demo1和Demo2,Demo1中有一个路径‘http://127.0.0.1:8000/index/’,对应的视图是index视图返回一个inde ...

  4. 原生JS实现Ajax的跨域请求

    原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求. 了解一下:“同源策略”,你就知道了: 同源策略限制从一个源加载的文档或脚本如 ...

  5. 【坑】前后端分离开发中 跨域问题以及前台不带cookie的问题

    文章目录 前言 跨域问题 cookie问题 拦截器导致的跨域问题 后记 前言 场景一: 前台哒哒哒的点击页面,发送请求,但是后台服务器总是没有回应,后台接口虽打了断点,但是根本进不到断点处: 前端:我 ...

  6. 如何利用vue和php做前后端分离开发?

    新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps: php那 ...

  7. jQuery的Ajax的跨域请求

    今天碰到一个Ajax跨域请求的问题,我把源码down下来,然后在服务器端写了一个http请求的代理(因为服务器端是不存在跨域问题的),说白了就是用BufferedReader写了个IO流,然后读取到目 ...

  8. jQuery的ajax jsonp跨域请求

    了解:ajax.json.jsonp.“跨域”的关系 要弄清楚以上ajax.json.jsonp概念的关系,我觉得弄清楚ajax是“干什么的”,“怎么实现的”,“有什么问题”,“如果解决存在的问题”等 ...

  9. ajax的跨域请求

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...

随机推荐

  1. mysql left( right ) join使用on 与where 筛选的差异

    有这样的一个问题mysql查询使用mysql中left(right)join筛选条件在on与where查询出的数据是否有差异. 可能只看着两个关键字看不出任何的问题.那我们使用实际的例子来说到底有没有 ...

  2. hdu 3849 (双联通求桥)

    一道简单的双联通求桥的题目,,数据时字符串,,map用的不熟练啊,,,,,,,,,,,,, #include <iostream> #include <cstring> #in ...

  3. VB-获取本机计算机名,登录名、ip地址

    真的是很简单,执行结果:Computer:不平凡总在于坚持  User:Administrator  IP:192.168.0.111     '获取计算机名.用户名.本机ip     Dim Loc ...

  4. DOS命令创建以日期为文件名的任务计划TXT文件

    因为每天早上都要做计划,所以做了个批处理文件来创建任务计划TXT文件 文件内容展示如下: 2013/07/09 周二 今日任务: 1. 2. 待办任务: 1. 2. 出现问题: 解决办法: 出现问题: ...

  5. 在Linux上配置vsftpd

    一般安装好vsftpd这个服务,它的默认配置文件在这里:/etc/vsftpd/vsftpd.conf 用vim在里面可以添加一些变量控制权限之类的.还有很多chroot相关的东西,里面的变量都有作用 ...

  6. APP被苹果APPStore拒绝的各种原因 分类: ios相关 app相关 2015-06-25 17&colon;27 200人阅读 评论&lpar;0&rpar; 收藏

    APP被苹果APPStore拒绝的各种原因 1.程序有重大bug,程序不能启动,或者中途退出. 2.绕过苹果的付费渠道,我们之前游戏里的用兑换码兑换金币. 3.游戏里有实物奖励的话,一定要说清楚,奖励 ...

  7. 尝试dapper和postgresql

    大多数地方和其他数据库(MySQL)没有什么不同.只有几点要注意: 1.PostgreSQL表名和字段是区分大小写的,大小写不对会说字段不存在 2.插入Json数据时,要在字符串后面加上::json ...

  8. Scrapy学习之路(一)————环境配置

    一.问题环境安装 首先scrapy这个爬虫框架是基于twisted完成的因此,在安装scrapy之前需要安装twisted.否则直接安装scrapy就会直接出错:Failed building whe ...

  9. &lbrack;EXP&rsqb;WordPress Core 5&period;0 - Remote Code Execution

    var wpnonce = ''; var ajaxnonce = ''; var wp_attached_file = ''; var imgurl = ''; var postajaxdata = ...

  10. spark运行模式

    一.Spark运行模式 Spark有以下四种运行模式: local:本地单进程模式,用于本地开发测试Spark代码; standalone:分布式集群模式,Master-Worker架构,Master ...