笔者在做前后端分离系统时，出现了很多坑，比如前后端的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. centos7使用yum安装mysql 【转】

    转自:http://blog.csdn.net/eclothy/article/details/52733891 使用: yum install mariadb*    (注意,带星号) 安装好后,启 ...

  2. Sample Means（耶鲁大学教材）

    Sample Means The sample mean from a group of observations is an estimate of the population mean. Giv ...

  3. websocket学习和群聊实现

    WebSocket协议可以实现前后端全双工通信,从而取代浪费资源的长轮询.在此协议的基础上,可以实现前后端数据.多端数据,真正的实时响应.在学习WebSocket的过程中,实现了一个简化版群聊,过程和 ...

  4. linux学习笔记-解决google-chrome打开后弹出输入密码以解锁您的登录密钥环的提示

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.理论知识 1.密钥的作用 google-chrome存储了网站登录时使用的账号和密码信息,这个密钥是用来保护这些信息的 2. ...

  5. Python简单的网络编程

    OSI 模型介绍 应用层 -- 对接受的数据进行解释.加密与解密.压缩与解压缩 会话层 -- 通过传输层(端口号: 传输端口和接受端口) 建立数据传输的通路 传输层 -- 定义了一些传输数据的协议和端 ...

  6. [简记] github 上的 GraphQL v4 API

    突发奇想,想用github做一个支持rss的blog体系,或者就是知识管理体系,简单看了下,把测试用的暂存起来 # Type queries into this side of the screen, ...

  7. Python之历史

    一.python简单介绍 python的创始人:吉多·范罗苏姆(Guido van Rossum),于1989年开始编写,到1991年完成了第一个python编译器.它是用C语言实现的,并能够调用C语 ...

  8. XML语言学习随笔

    XML和HTML都是W3C的定制的标准,XML的诞生本身是为了替代不成熟的HTML,但是因为现实的环境,XML替代HTML并未成功.之后W3C为了代码严谨性的决心,又发布了升级版的标记语言XHTML, ...

  9. python自动化开发-3

    python里的集合 1.集合的概念 集合(set):把不同的元素组成一起形成集合,是python基本的数据类型.set集合,是一个无序且不重复的元素集合. 2.集合的主要作用 1)去重 举例说明: ...

  10. Nginx入门到精通

    目录 入门篇 1.Nginx的介绍 2.Nginx的安装 3.Nginx的深入剖析 4.Nginx的虚拟主机 5.Nginx的常用功能 6.Nginx的日志剖析 7.Nginx的location剖析 ...