笔者在做前后端分离系统时，出现了很多坑，比如前后端的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. Linux 学习记录 四(Bash 和 Shell scirpt).

    一.什么是 Shell? 狭义的shell指的是指令列方面的软件,包括基本的Linux操作窗口Bash等,广义的shell则包括 图形接口的软件,因为图形接口其实也可以操作各种驱动程序来呼叫核心进行工 ...

  2. 表数据量影响MySQL索引选择

    现象 新建了一张员工表,插入了少量数据,索引中所有的字段均在where条件出现时,正确走到了idx_nap索引,但是where出现部分自左开始的索引时,却进行全表扫描,与MySQL官方所说的最左匹配原 ...

  3. idea vue.js插件安装

    Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...

  4. 2017-12-01 中英文代码对比之ZLOGO 4 & LOGO

    基于前文中文编程语言之Z语言初尝试: ZLOGO 4的一些评论, 此文尝试作一个非常简单的代码对比, 使讨论更加有实例根据. 下图是节选自前文最后的示例代码, 由于选取的对照LOGO版本 (alanc ...

  5. Linux 下的 PostgreSQL 数据库+文件通用自动备份脚本

    由于 Odoo(原名 OpenERP)自 8.0 以来会生成 CSS,并把附件存储在文件系统中,因此以前单纯备份数据库的脚本已经不够用了.出于实际部署的考虑,我专门写了个较为通用的 Odoo 备份脚本 ...

  6. Mobile First！ Wijmo 5 之 架构

    CSDN移动开发频道率先报道的<Mobile First!jQuery UI组件集Wijmo五年最大更新>引起开发者极大关注. 本文就开发者关心的话题之一架构,展开叙述. Wijmo 5是 ...

  7. 新浪微博POI点签到数据及可视化的初步成果

    目前仅对山东省区域进行了抓取,权限不够高,抓取的速度非常慢,所以导致效率比较低... 数据抓取采用调用微博开放平台API的方法,数据存储采用mysql,格点数据分辨率为30″,山东省的MBR范围内(包 ...

  8. android系统通过图片绝对路径获取URI的三种方法

    最近做项目要通过图片的绝对路径找到图片的URI,然后删除图片,小小总结一下获取URI的方法,亲自试验在 android 4.1.3的系统上都是可用的. 1.将所有的图片路径取出,遍历比较找到需要的路径 ...

  9. genymotion和adb的解决方法

    问题: 安装了genymotion后.再单独安装了adb 然后在关闭genymotion后,输入adb devices,下方显示为空,然后打开genymotion,cmd输入adb devices,显 ...

  10. 洗礼灵魂，修炼python（54）--爬虫篇—urllib2模块

    urllib2 1.简介 urllib2模块定义的函数和类用来获取URL(主要是HTTP的),他提供一些复杂的接口用于处理: 基本认证,重定向,Cookies等.urllib2和urllib差不多,不 ...