如何真正理解用Nginx代理来解决同源策略

经过对同源策略的了解，我们应该要消除对浏览器的误解，同源策略是浏览器做的一件好事，是用来防御来自邪门歪道的攻击，但总不能为了不让坏人进门而把全部人都拒之门外吧。没错，我们这种正人君子只要打开方式正确，就应该可以跨域。
下面将一个个演示正确打开方式，但在此之前，有些准备工作要做。为了本地演示跨域，我们需要：
1.随便跑起一份前端代码（以下前端是随便跑起来的vue），地址是http://localhost:9099。
2.随便跑起一份后端代码（以下后端是随便跑起来的node koa2），地址是http://localhost:9971。

解决同源策略

想一下，如果我们请求的时候还是用前端的域名，然后有个东西帮我们把这个请求转发到真正的后端域名上，不就避免跨域了吗？这时候，Nginx出场了。
Nginx配置

server{# 监听9099端口listen 9099;# 域名是localhostserver_name localhost;#凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 location ^~ /api {proxy_pass http://localhost:9871;}
}

前端就不用干什么事情了，除了写接口，也没后端什么事情了

// 请求的时候直接用回前端这边的域名http://localhost:9099，这就不会跨域，然后Nginx监听到凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871

fetch('http://localhost:9099/api/getFoo', {method: 'POST',headers: {'Accept': 'application/json','Content-Type': 'application/json'},body: JSON.stringify({msg: 'hello'})
})

Nginx转发的方式似乎很方便！但这种使用也是看场景的，如果后端接口是一个公共的API，比如一些公共服务获取天气什么的，前端调用的时候总不能让运维去配置一下Nginx，如果兼容性没问题（IE 10或者以上），CROS才是更通用的做法吧。

同源策略限制下Dom查询的正确打开方式

如何真正理解用Nginx代理来解决同源策略相关推荐

Nginx 代理解决前端跨域问题
目录一.什么是 nginx 二.nginx 的用途三.代理 1.正向代理 2.反向代理四.nginx.conf 配置文件的基本结构五.nginx 的内置变量六.nginx 解决跨域的原理七 ...
nginx代理mysql数据库 stream
写作背景在某云搞了个服务器,装了个数据库后一切配置OK,发现远程连接不上,排查了一天没有找到问题(安全组策略及防火墙.开放端口) .在毫无头绪之际突然想到nginx代理的80端口可以访问,本着All ...
springBoot 解决前后端分离项目中跨越请求，同源策略
今天在做项目的过程,采用前后端分离技术的时遇到采用ajax请求无法访问后台接口,按F12,查看浏览器运行状态时,报如下错误为了解决浏览的同源策略,就必须了解什么是同源策略. 1.什么是同源策略同源 ...
nginx代理响应报文体不全解决思路
问题说明环境说明: centos 6.5 nginx 1.13.7 tomcat 8.5+ jdk 1.8 问题描述本地访问测试机接口发生异常 curl访问结果: tomcat日志: 解决思路开 ...
nginx反向代理配置解决不同域名默认页面不同问题
nginx反向代理配置解决不同域名默认页面不同问题背景设计思路步骤背景需求:使用同一个项目(http://localhost:8080/thzhdj)映射两个域名(test1.com,tes ...
vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
微服务架构（5）：nginx反向代理cors解决跨域
微服务架构(5):nginx反向代理&&cors解决跨域学习目标 1.使用域名访问本地项目 1.1.统一环境 1.2.域名解析 1.3.解决域名解析问题 1.4.nginx解决端口问 ...
Nginx 使用 proxy_cookie_path 解决反向代理 cookie 丢失导致无法登录等问题
语法参考nginx官方文档语法: proxy_cookie_path off;proxy_cookie_path path replacement; 默认: proxy_cookie_path o ...
解决vue项目中前后端交互的跨域问题、nginx代理配置
最近新接了一个项目,需要自己写一个小demo和后端联调,第一次用自己写的demo和后端联调,出现了问题. 问题:Access to XMLHttpRequest at 'http://192.168. ...

如何真正理解用Nginx代理来解决同源策略

如何真正理解用Nginx代理来解决同源策略相关推荐

最新文章

热门文章