笔者在做前后端分离系统时，出现了很多坑，比如前后端的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] soundpool简介

    主要的应用场景是游戏开发的时候,声音都比较短,比较密集,使用这个api来实现 池:实现了一个链表,旧的资源不会被释放掉,而是存起来,等用的时候,重新使用 不会创建过多的对象 在res资源目录里面创建一 ...

  2. Bell(hdu4767+矩阵+中国剩余定理+bell数+Stirling数+欧几里德)

    Bell Time Limit:3000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status  ...

  3. Cylinder Candy（积分+体积+表面积+旋转体）

    Cylinder Candy Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge Edward the confectioner is ...

  4. 在C#中的构造函数和解析函数

    构造函数 class A() { A() {Console.write("构造函数");} } 当你在程序种出现 A a=new A();的时候 程序自动执行 构造函数 A() { ...

  5. SVN多项目并行版本管理解决方案

    1.背景 随着公司业务拓展,各业务部门频繁的需求变更,导致系统集成冲突的问题日益突出. 2.现状 基于SVN版本管理模式,多分支版本并行,分支合并主干交付.多分支开发存在依赖关系且有交付的先后顺序, ...

  6. C++桥接模式【转】

    https://www.cnblogs.com/jiese/p/3164940.html 将抽象部份与它的实现部份分离,使它们都可以独立地变化. 桥接模式号称设计模式中最难理解的模式之一,关键就是这个 ...

  7. 洛谷P2572 [SCOI2010]序列操作(ODT)

    题解 题意 题目链接 Sol ODT板子题..... // luogu-judger-enable-o2 #include<bits/stdc++.h> #define LL long l ...

  8. json&pickle数据序列化模块

    用于序列化的模块 json,通用的序列化方式,序列化成为str类型,支持所有语言识别,序列化的数据具有局限性. pickle,python的所有数据类型都可以被序列化,序列化为bites格式,只适用于 ...

  9. Tensorflow高效读取数据

    关于Tensorflow读取数据,官网给出了三种方法: 供给数据(Feeding): 在TensorFlow程序运行的每一步, 让Python代码来供给数据. 从文件读取数据: 在TensorFlow ...

  10. Android Studio：Support Library依赖包的版本号

    当我们用RecyclerView时,如果想用某一个特定的版本,怎样才能知道版本号呢?如果自己的笔记本中用过这个库,那么会保存在本地硬盘中. Android自身依赖包的版本号本地存放路径:  没有用过该 ...