利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
时间:2019-06-13
本文章向大家介绍利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技),主要包括利用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;#代理服务地址
#开始配置我们的反向代理
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/"
教程到此结束,如有任何疑问,请再评论区留言,或者私信/发邮件
原文地址:https://www.cnblogs.com/roseAT/p/11013868.html
- 学习HTML5之表单
- 基于jQuery的ajax对WebApi和OData的封装我们还是先来看看要求在看看目标:思路封装方式
- js的动态加载、缓存、更新以及复用(四)
- ajax的再次封装!(改进版) —— new与不 new 有啥区别?
- ajax的再次封装!
- 【自然框架】js版的QuickPager分页控件 V2.0
- 你的SQL语句放在了哪里?
- oclhashcat:离线hash密码破解工具官方文档(中文版)
- 如何动态加载js?
- 【自然框架】数据访问之精雕细琢(一)存储过程的参数
- 100w条记录分页,可以有多快?—— DataReader分页与SQL语句分页的对比测试(在线演示)
- Mimikatz小实验:黄金票据+dcsync
- 【自然框架】n级下拉列表框的原理
- 【自然框架】分享 n级联动下拉列表框
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PHP实用小技巧之调用录像的方法
- Laravel重定向,a链接跳转,控制器跳转示例
- Laravel 错误提示本地化的实现
- Laravel框架DB facade数据库操作详解
- laravel 解决强制跳转 https的问题
- 在laravel中实现将查询的对象转换为多维数组的函数
- 在Laravel 中实现是否关注的示例
- Laravel框架查询构造器常见用法总结
- laravel 解决多库下的DB::transaction()事务失效问题
- laravel 实现上传图片到本地和前台访问示例
- laravel框架模型中非静态方法也能静态调用的原理分析
- Laravel 5.2 文档 数据库 —— 起步介绍
- laravel csrf排除路由,禁止,关闭指定路由的例子
- thinkphp框架类库扩展操作示例
- Laravel ORM 数据model操作教程