Nginx完美解决前后端分离端口号不同导致的跨域问题
笔者在做前后端分离系统时,出现了很多坑,比如前后端的url域名相同,但是端口号不同。例如前端页面为:http://127.0.0.1/ , 后端api根路径为 http://127.0.0.1:8888 ,这样就导致跨域问题,前端设置的request header或者cookies后端接收不到,这是很蛋疼的问题。用nginx配置端口转发完美解决。首先在本机安装nginx,前端配置端口号为80
$ sudo nginx
$ vim /usr/local/etc/nginx/nginx.conf
接着配置后端api接口,设置路径为 /api/
保存重启nginx
$ sudo nginx reload
在浏览器中访问 http://127.0.0.1 和 http://127.0.0.1/api/ 成功!
Nginx完美解决前后端分离端口号不同导致的跨域问题的更多相关文章
- 前后端分离 开发环境通过CORS实现跨域联调
通过JSONP实现跨域已是老生常谈,JSONP跨域限制多,最近了解了一下CORS. 参考: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Acce ...
- docker+nginx+redis部署前后端分离项目!!!
介绍本文用的经典的前后端分离开源项目.项目的拉取这些在另一篇博客!!! 其中所需要的前后端打包本篇就不做操作了!!不明白的去看另一篇博客!!! 地址:http://www.cnblogs.com/ps ...
- nginx反向代理前后端分离项目(后端多台)
目前软件架构都比较流行前后端分离,前后端的分离也实现了前后端架构的分离,带来的好处 —— 整个项目的开发权重往前移,实现真正的前后端解耦,动态资源和静态资源分离,提高了性能和扩展性. 通常Spring ...
- 利用gulp解决前后端分离的header/footer引入问题
在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...
- 解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案
在前后端分离的项目中,前端和后端可能是在不同的服务器上,也可以是Docker上,那就意味着前端请求后端Restful接口时,存在跨域情况. 后端在做了通用的跨域资源共享CORS设置后,前端在做ajax ...
- Nginx+Springboot+Vue 前后端分离 解决跨域问题
1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...
- ubantu18.04 配置nginx与uwsgi(前后端分离)
ubantu18.04 配置nginx与uwsgi 一.首先先安装nginx静态服务 先更新 sudo apt-get update 1.安装gcc g++的依赖库 sudo apt-get in ...
- mock的使用及取消,node模仿本地请求:为了解决前后端分离,用户后台没写完接口的情况下
借鉴:https://www.jianshu.com/p/dd23a6547114 1.说到这里还有一种是配置node模拟本地请求 (1)node模拟本地请求: 补充一下 [1]首先在根目录下建一个d ...
- 解决前后端分离后的Cookie跨域问题
一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...
随机推荐
- (2)Jquery1.8.3快速入门_checkbox全选取消部分选中
1. jquery示例功能: checkbox多选框 全选 .全不选. 选择部分. 源码 : <!DOCTYPE html> <html> <head> <m ...
- Java的第6天,学习运算符
提到运算符我们就会想起 加 减 乘 除: Java中的一些运算符:关系运算符.逻辑运算符.赋值运算符.和条件运算符: 其中算术运算符有:+ , - , * , \, % ,++, -- ; + , - ...
- vue按需引入element或mint
vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component
- 后端自测必备神器-PostMan
作为后端的一个小小菜鸟,写代码没有把握,总怕出错,也不敢直接扔测试,这个时候就需要一个神器能够辅助自己去测试各种情况,让自己安心的交给测试,嗯……这时神器出场了------PostMan.在一个偶然的 ...
- DOM之城市二级联动
1.HTML内容 <select id="province"> <option>请选择</option> <option>山东省&l ...
- encodeURIComponent编码时为什么要编码两次
Why 要对url进行编码? 当使用地址栏提交查询参数时,如果不编码,非英文字符会按照操作系统的字符集进行编码提交到服务器,服务器会按照配置的字符集进行解码,所以如果两者不一致就会导致乱码. Wh ...
- Apex 的 Trigger 类简介
Apex Triggers Apex 触发器(Apex Triggers)是一种特殊的 Apex 类.它的主要作用是在一条记录被插入.修改.删除之前或之后自动执行一系列的操作.每一个 Trigger ...
- Linux高可靠技术
1.进程挂死时,有后台监控程序检测重新拉起. 2.进程占用系统资源超过ulimit限定的资源时,会被ulimit杀死,同时配合后台监控程序,重新拉起进程,实现进程可靠性. 3.Linux系统的高可靠性 ...
- Angular基础(六) DI
一.依赖注入 a) 如果模块A需要依赖模块B,通常的做法是在A中导入B,import{B} from ‘B’,但有一些场合需要解除这种直接依赖,比如单元测试时需要mock一个B对象.还有时要创建B ...
- Angular 2基础(一) 环境搭建
Angular2是一款开源JavaScript库,由Google维护,用来创建页面应用程序.正式发布于2016年9月,基于ES6开发. 一.准备工作 使用Angular2开发,需要预先做一些配置上的配 ...