笔者在做前后端分离系统时，出现了很多坑，比如前后端的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完美解决前后端分离端口号不同导致的跨域问题的更多相关文章

  1. 前后端分离 开发环境通过CORS实现跨域联调

    通过JSONP实现跨域已是老生常谈,JSONP跨域限制多,最近了解了一下CORS. 参考: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Acce ...

  2. docker+nginx+redis部署前后端分离项目！！！

    介绍本文用的经典的前后端分离开源项目.项目的拉取这些在另一篇博客!!! 其中所需要的前后端打包本篇就不做操作了!!不明白的去看另一篇博客!!! 地址:http://www.cnblogs.com/ps ...

  3. nginx反向代理前后端分离项目（后端多台）

    目前软件架构都比较流行前后端分离,前后端的分离也实现了前后端架构的分离,带来的好处 —— 整个项目的开发权重往前移,实现真正的前后端解耦,动态资源和静态资源分离,提高了性能和扩展性. 通常Spring ...

  4. 利用gulp解决前后端分离的header/footer引入问题

    在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...

  5. 解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案

    在前后端分离的项目中,前端和后端可能是在不同的服务器上,也可以是Docker上,那就意味着前端请求后端Restful接口时,存在跨域情况. 后端在做了通用的跨域资源共享CORS设置后,前端在做ajax ...

  6. Nginx+Springboot+Vue 前后端分离 解决跨域问题

    1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...

  7. ubantu18.04 配置nginx与uwsgi(前后端分离)

    ubantu18.04 配置nginx与uwsgi   一.首先先安装nginx静态服务 先更新 sudo apt-get update 1.安装gcc g++的依赖库 sudo apt-get in ...

  8. mock的使用及取消，node模仿本地请求：为了解决前后端分离，用户后台没写完接口的情况下

    借鉴:https://www.jianshu.com/p/dd23a6547114 1.说到这里还有一种是配置node模拟本地请求 (1)node模拟本地请求: 补充一下 [1]首先在根目录下建一个d ...

  9. 解决前后端分离后的Cookie跨域问题

    一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...

随机推荐

  1. [android] 手机卫士自定义滚动控件

    TextView控件设置单行显示 android:singleLine=”true” 设置TextView开始的位置显示省略号,android:ellipsize=”start” 设置滚动属性,and ...

  2. ELK日志分析平台系统windows环境搭建和基本使用

    ELK(ElasticSearch, Logstash, Kibana),三者组合在一起就可以搭建实时的日志分析平台啦! Logstash主要用来收集.过滤日志信息并将其存储,所以主要用来提供信息. ...

  3. c++类构造函数详解

    //一. 构造函数是干什么的 /*   类对象被创建时,编译系统对象分配内存空间,并自动调用该构造函数->由构造函数完成成员的初始化工作      eg: Counter c1;      编译 ...

  4. Error running tomcatUnable to open debugger port (127.0.0.1 50181) java.net.B

    1.把tomcat删除,重新建一个,tomcat就会重新自动使用一个端口了 2.自己手动调一下端口 我用的是第二种,手动调了下,最开始的端口是:50181,该成了50182,就可以了.

  5. JS之用ES6 Promise解决回调地狱（这里以小程序为例）

    首先 写一个请求的方法,如: /** * 银行窗口 * 你需要给我提供相关的相关参数我帮你提交到服务器上 * 我会给你一个等待区的编号给你 你去等待区等待,我处理完成会去等待区通知你 * @param ...

  6. jQuery中bind() live() delegate() on() 的区别

    实例 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){aler ...

  7. 【机器学习】激活函数(ReLU, Swish, Maxout)

    https://blog.csdn.net/ChenVast/article/details/81382939 神经网络中使用激活函数来加入非线性因素,提高模型的表达能力. ReLU(Rectifie ...

  8. 程序员Web面试之JSON

    JSON是什么? JSON(JavaScript对象表示法), 是在网络通信下,常用的一种数据表达格式,它有助于我们于一个自描述的,独立的和轻的方式呈现并交换数据.这些数据可以易于和转换为JavaSc ...

  9. Android--px（像素）和dp、sp之间的相互转化

    public class DensityUtil { public DensityUtil() { } public static int dip2px(Context var0, float var ...

  10. 转 fiddler常见的应用场景

    fiddler常见的应用场景   在移动互联网时代,作为软件测试工程师,fiddler绝对是值得掌握并添加进技术栈里的工具之一. 那么,fiddler在日常的测试工作中,一般都有哪些常见的应用场景呢? ...