前后端分离，nginx解决跨域问题

问题描述：

前端react-app使用nginx部署到服务器，浏览器访问80端口，页面请求同一服务器的后台api，由于端口不同，产生跨域。（域名不同也会跨域）

解决

nginx修改，在监听80端口的同时，对前端的请求转发的实际的后台服务。

//nginx 部分修改
server {listen 80;server_name  localhost;location / {root   /webserver;index  index.html index.htm;autoindex on;autoindex_exact_size on;autoindex_localtime on;}location /api/ {proxy_pass  http://120.78.202.210:7001/;}}
复制代码

如上，将前端/api 下的请求转发到配置地址。

//前端代码修改
const getData = () => {axios.get("http://120.78.202.210/api/v1/zhihu/topimage/").then(res => {console.log(res)}).catch(res => {console.log(res)})
}
复制代码

如上，由于直接请求"http://120.78.202.210:7001/v1/zhihu/topimage/端口不同导致跨域，因此修改全部请求代码，将/api/下的请求转发到实际的服务器。

若是本地调试，可以添加chrome扩展。

前后端分离，nginx解决跨域问题相关推荐

前后端分离如何解决跨域的问题？
参考帖子:https://blog.csdn.net/cuixiaogang110/article/details/81948173?utm_medium=distribute.pc_relevant ...
Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题
Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题参考文章: (1)Vue整合nginx:(1)开发环境npm run dev下,通过nginx ...
前后端分离项目，跨域问题解决方案
1.什么是跨域? 要了解跨域,先要说说同源策略. 同源策略是由 Netscape 公司提出的一个著名的安全策略,所有支持 JavaScript 的浏览器都会使用这个策略. 由于浏览器同源策略的限制,非 ...
php 跨域验证_php 前后端分离开发进行跨域请求时ajax发送验证参数token的header头解决方法...
php前后端分离开发中要实现前后端参数信息交互,必须解决token标识验证问题. 步骤如下: 1.前端ajax发送请求时,要设置一个自定义header头.代码如下: $.ajax({ url:&quo ...
cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结
前言前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合,但是由于这 ...
vue前后分离session实现_vue2 前后端分离项目ajax跨域session问题解决
最近学习使用vuejs前后端分离,重构一个已有的后台管理系统,遇到了下面这个问题: 实现跨域请求时,每次ajax请求都是新的session,导致无法获取登录信息,所有的请求都被判定为未登陆. 1. v ...
thinkphp fastadmin 解决vue前后端分离项目的跨域问题以及 OPTIONS请求类型
fastadmin的专用方法: 修改文件:application/config.php,这是fa的配置文件. 修改属性 cors_request_domain,搜一下就找到了,在里面加上你的域名就行了 ...
无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离
近年来,前后端分离已经成为中大型软件项目开发的最佳实践. 在技术层面,前后端分离指在同一个Web系统中,前端服务器和后端服务器采用不同的技术栈,利用标准的WebAPI完成协同工作.这种前后端分离的&q ...
使用nginx解决跨域问题
1.跨域解释 1.1 怎么知道我遇到了跨域问题如果项目没做前后端分离,是不会有跨域问题的.前后端分离的项目中,前端调用后台服务时,报错 No 'Access-Control-Allow-Origin ...
如何用nginx解决跨域问题
先来说一下什么是同源策略同源(域名.协议.端口相同)策略是一种约定,是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,浏览器的正常功能将受到影响. 什么是跨域? 跨域就是跨域名,跨端口,跨协议 ...

前后端分离，nginx解决跨域问题

问题描述：

解决

前后端分离，nginx解决跨域问题相关推荐

最新文章

热门文章