利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技)
前言
为什么会出现跨域?
造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题主要是针对js和Ajax的,
同源策略
为保障浏览器安全。不同的域名, 不同端口, 不同的协议是不允许共享资源的,
- 解决跨域问题的常见方式
- JSONP
- iframe
- ...(此处省略N种)
使用代理(文章主要讲到的方法)
进入今天的主题(^-^)
使用Nginx反向代理实现ajax进行跨域访问
首先得把Nginx下载到我们的电脑上来
戳=>ngin官网下载,选择Stable version(稳定版)中的 nginx/Window版进行下载(文件很小只有不到2M的大小的压缩包)
- 解压到自己喜欢的路径中(不包含中文)
- 打开conf文件夹->右键选择nginx.conf文件使用你喜欢的文本编辑工具打开
- 找到文件中的 server部分
编辑server内容为↓
server {listen 8088;#监听端口server_name localhost;#代理服务地址add_header Access-Control-Allow-Origin *;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,*';}}
常用nginx命令
(在解压目录中打开cmd控制台窗口(可直接站资源管理器路径的url输入框中输入cmd即可直接在解压目录打开))
start nginx.exe //启动nginx
nginx.exe -s reload //重载配置
nginx.exe -s stop //快速停止
nginx.exe -s quit //完整有序停止
- 配置完成后,保存一下
如果已经打开Nginx,请使用命令重载配置,①停止->②重载配置->③启动
重要!在浏览器中输入 http://localhost:8088/ 即可访问配置文件中设置的根目录项目的资源,如果出现404(网页无法显示)说明配置不正确,或者修改的配置文件还没有生效,按上述重载步骤操作一下
- 注意!此时如果使用file:///D:/xxxx.html 本地文件路径虽然能访问xxx.html资源文,但仍然不能进行跨域访问资源的访问
只有通过 http://localhost:8088/ 打开对应的xxx.html文件才能进行跨域操作,不会被浏览器拦截
因为通过这个地址预览到的HTML文件和请求路径都在 http://localhost:8088/ 这个域中, 最终我们js代码里的ajax请求的baseUrl路径就可以使用:
http://localhost:8088/api 完美代替实现跨域访问=> http://localhost:9000 上的资源
- 解决跨域问题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中的内容,而实际情况是↓
不用看我这里的的请求url,我只是举个 跨域警告的栗子
解决方案
按照前面的步骤完成配置后只需改变代码中 baseUrl的值,然后通过 http://localhost:8088/xxxx.html 访问静态资源,即可进行舒服的跨域请求操作
//改变后的baseUrl
const baseUrl="http://localhost:8088/api/testDemo/"
教程到此结束,如有任何疑问,或者不明白的地方,请在评论区留言,或者私信/发邮件
转载于:https://www.cnblogs.com/roseAT/p/11013868.html
利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)相关推荐
- 轻松搞定JSONP跨域请求
轻松搞定JSONP跨域请求 一.同源策略 要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑, ...
- Ajax(跨域请求)
JSONP 跨域请求 CORS 跨域请求 proxy代理请求 1.什么是跨域 首先,现代浏览器为了安全,做了一个同源限制. 也就是所谓的同源安全策略. 本质上,其实是不存在所谓的跨不跨域的. 把浏览器 ...
- Nginx 指定多个域名跨域请求配置
nginx指定多个域名跨域请求配置 什么是跨域 假设我们页面或者应用已在 http://www.test1.com 上了,而我们打算从 http://www.test2.com 请求提取数据.一般情况 ...
- jfinal里使用ajax,Jfinal解决AJAX的跨域请求
JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful. 一开始使用AJAX来传输json数据时, ...
- ajax+php跨域请求数据库,基于jQuery的ajax跨域请求,PHP作为服务器端代码
ajax实现跨域请求有两种方式: 方法一:jsonp的方式 jsonp方式的关键点在客户请求以jsonp作为数据类型,服务器端接收jsonp的回调函数,并通过回调函数进行数据的传输.具体代码如下: 客 ...
- php 跨域 验证_php 前后端分离开发进行跨域请求时ajax发送验证参数token的header头解决方法...
php前后端分离开发中要实现前后端参数信息交互,必须解决token标识验证问题. 步骤如下: 1.前端ajax发送请求时,要设置一个自定义header头.代码如下: $.ajax({ url:&quo ...
- ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案 今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下 原来的ajax请求如下: $.ajax( ...
- jq中ajax请求跨域,jquery+ajax实现跨域请求的方法
本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为 "jsonp" :type 只能为 GET ...
- ajax是如何实现跨域的,在JS中如何实现ajax与ajax的跨域请求
下面小编就为大家分享一篇原生JS实现ajax与ajax的跨域请求实例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧 一.原生JS实现ajax 第一步获得XMLHttpRequest对 ...
最新文章
- javaweb学习总结(四十)——编写自己的JDBC框架
- DL之CNN:基于CNN-RNN(GRU,2)算法(keras+tensorflow)实现不定长文本识别
- 解决:Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:2.3.2问题
- 感知算法论文(九):Towards Accurate One-Stage Object Detection with AP-Loss
- npy一维数组如何对给出的索引进行反选
- request payload怎么发_做了一个个人博客,但不知道怎么介绍
- 【WC2008】【BZOJ1271】秦腾与教学评估(二分,前缀和,奇偶性乱搞)
- 有意思的clip-path
- 办公软件入门--word01
- 迅雷一些版本下载链接
- pip-script.py‘ is not present Verifying transaction: failed
- eclipse建web工程的dynamic web module version 具体是什么意思
- 手机显示屏LCDTP的不同贴合工艺
- Vue进阶(八十二):updated 应用详解
- 腾讯云TVP大佬十年心血MySQL工作笔记,看完还不懂MySQL来打我!
- asynctaskdemo(Info)5
- 经典过桥问题的思路解析
- 影响中国I软件开发的二十人
- 博弈论简单介绍及代码
- 阿里云、腾讯云等如何运用IPFS技术做存储?