一种解决前端本地开发跨域问题的方法和装置制造方法及图纸

本发明专利技术提供了一种解决前端本地开发跨域问题的方法及装置，所述方法具体如下：启动nginx服务，修改nginx配置文件，nginx服务配置root到前端代码本地资源或者本地前端服务；修改nginx配置文件，nginx服务配置upstream服务，并配置server及相应开放的本地接口；修改nginx配置文件，nginx服务配置针对后端接口的location反向代理，对接口路径配置proxy_pass属性到相应的后端环境；执行命令nginx‑sreload，nginx重新加载配置文件，使之生效；更改本地host配置文件，将localhost配置到nginx对应的服务host；访问后端接口获取数据。

A method and device to solve the cross domain problem of front-end local development

【技术实现步骤摘要】
一种解决前端本地开发跨域问题的方法和装置
本专利技术涉及前端开发
，具体涉及一种解决前端本地开发跨域问题的方法和装置。
技术介绍
前端跨域：AJAX跨域访问是用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面。由于安全方面的原因，客户端js使用xmlhttprequest只能用来向来源网站发送请求Nginx：Nginx(enginex)是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。反向代理：反向代理(ReverseProxy)方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。目前前端开发都是本地开发然后打包部署到测试环境，这种老旧的方式导致开发效率的低下，一个像素的改动都要去重新编译部署一遍，目前这样做的原因一般都是因为跨域的原因导致，所以本地解决跨域就是一个很重要的问题。现有的跨域解决方案有很多比如CROSS，JSONNP等方案。Cross是服务端在httpheader里面加入允许的所有源访问的方案是一种服务端支持跨域的方案JSONP即JSONwithPadding。由于同源策略的限制，XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。现有技术的缺点在于，需要服务端支持跨域，且存在服务端被攻击注入的风险。
技术实现思路
本专利技术提供了一种解决前端本地开发跨域问题的方法和装置，解决了现有技术的以下问题：1、前端本地开发总会遇到跨域的问题；2、前端本地开发切换后端接口环境时需要修改代码后重新编译；3、后端针对跨域问题开放支持HTTP协议跨域带来的风险；4、前端本地开发时无法处理APP端小程序对域名的校验。本专利技术采用的技术方案具体如下：一种解决前端本地开发跨域问题的方法，所述方法包括以下步骤：启动nginx服务，修改nginx配置文件，nginx服务配置root到前端代码本地资源或者本地前端服务；修改nginx配置文件，nginx服务配置upstream服务，并配置server及相应开放的本地接口；修改nginx配置文件，nginx服务配置针对后端接口的location反向代理，对接口路径配置proxy_pass属性到相应的后端环境；执行命令nginx-sreload，nginx重新加载配置文件，使之生效；更改本地host配置文件，将localhost配置到nginx对应的服务host；访问后端接口获取数据。本专利技术还提供了一种后端接口服务方法，采用所述的解决前端本地开发跨域问题的方法。进一步地，所述后端接口服务方法包括以下步骤：浏览器访问nignx反向代理服务；访问之后转发到相应的后端服务；nginx本地服务通过映射本地host进行本地开发模式下的跨域。进一步地，浏览器访问nignx反向代理服务之后通过流量转发到相应的后端服务。进一步地，所述后端服务包括后端生产服务、后端测试服务和后端本地服务。进一步地，host根据后端服务部署环境进行切换。本专利技术还提供了一种APP校验服务方法，采用所述的解决前端本地开发跨域问题的方法。进一步地，所述APP校验服务方法包括以下步骤：浏览器访问nignx反向代理服务；访问之后通过流量转发到相应的APP域名校验的WebAPI；nginx本地服务通过映射本地host进行本地开发模式下的域名校验。本专利技术还提供了一种解决前端本地开发跨域问题的装置，所述装置包括：nginx服务启动单元，用于启动nginx服务；nginx配置文件修改单元，用于修改nginx配置文件，nginx服务配置root到前端代码本地资源或者本地前端服务；修改nginx配置文件，nginx服务配置upstream服务，并配置server及相应开放的本地接口；修改nginx配置文件，nginx服务配置针对后端接口的location反向代理，对接口路径配置proxy_pass属性到相应的后端环境；命令执行单元，用于执行命令nginx-sreload，nginx重新加载配置文件，使之生效；host配置单元，用于更改本地host配置文件将localhost配置到nginx对应的服务host；数据获取单元，用于访问后端接口获取数据。本专利技术还提供了一种存储器，所述存储器存储有计算机程序，所述计算机程序执行如下步骤：启动nginx服务，修改nginx配置文件，nginx服务配置root到前端代码本地资源或者本地前端服务；修改nginx配置文件，nginx服务配置upstream服务，并配置server及相应开放的本地接口；修改nginx配置文件，nginx服务配置针对后端接口的location反向代理，对接口路径配置proxy_pass属性到相应的后端环境；执行命令nginx-sreload，nginx重新加载配置文件，使之生效；更改本地host配置文件将localhost配置到nginx对应的服务host；访问后端接口获取数据。本专利技术的有益效果在于，能够直接解决跨域，不需要前后端修改任何代码，能做到便捷，快速，高效的特点，实实在在提升前端的开发效率。附图说明图1为本地服务访问nginx反向代理到后端接口服务流程图；图2为本地服务访问nginx反向代理到APP校验服务流程图。具体实施方式本专利技术解决了前端访问后端接口浏览器跨域的问题；不需要后端接口支持跨域，解决了跨域的安全问题；解决了前后端数据和接口环境切换时需要重新配置编译的不灵活性；提供了前端开发时一个本地服务；解决了开发前端H5小程序时APP端集成时域名校验的麻烦；线上部署也可以用同样的方案和配置文件，统一了对环境的依赖性。下文中，结合附图和实施例对本专利技术作进一步阐述。实施例一：本专利技术提供了一种解决前端本地开发跨域问题的方法，包括以下步骤：步骤1，本地安装并开启Nginx服务执行如下命令：brewsearchnginx；brewinstallnginx；安装完成后配置文件路径(/usr/local/etc/nginx/nginx.conf)；安装路径(/usr/local/Cellar/nginx/1.8.0)；执行/usr/local/Cellar/nginx/1.8.0/bin/nginx-c/usr/loc本文档来自技高网...

【技术保护点】
1.一种解决前端本地开发跨域问题的方法，其特征在于，所述方法包括以下步骤：/n启动nginx服务，修改nginx配置文件，nginx服务配置root到前端代码本地资源或者本地前端服务；/n修改nginx配置文件，nginx服务配置upstream服务，并配置server及相应开放的本地接口；/n修改nginx配置文件，nginx服务配置针对后端接口的location反向代理，对接口路径配置proxy_pass属性到相应的后端环境；/n执行命令nginx-sreload，nginx重新加载配置文件，使之生效；/n更改本地host配置文件，将localhost配置到nginx对应的服务host；/n访问后端接口获取数据。/n

【技术特征摘要】
1.一种解决前端本地开发跨域问题的方法，其特征在于，所述方法包括以下步骤：
启动nginx服务，修改nginx配置文件，nginx服务配置root到前端代码本地资源或者本地前端服务；
修改nginx配置文件，nginx服务配置upstream服务，并配置server及相应开放的本地接口；
修改nginx配置文件，nginx服务配置针对后端接口的location反向代理，对接口路径配置proxy_pass属性到相应的后端环境；
执行命令nginx-sreload，nginx重新加载配置文件，使之生效；
更改本地host配置文件，将localhost配置到nginx对应的服务host；
访问后端接口获取数据。


2.一种后端接口服务方法，其特征在于，采用如权利要求1所述的解决前端本地开发跨域问题的方法。


3.如权利要求2所述的一种后端接口服务方法，其特征在于，所述后端接口服务方法包括以下步骤：浏览器访问nignx反向代理服务；访问之后转发到相应的后端服务；nginx本地服务通过映射本地host进行本地开发模式下的跨域。


4.如权利要求3所述的一种后端接口服务方法，其特征在于，浏览器访问nignx反向代理服务之后通过流量转发到相应的后端服务。


5.如权利要求4所述的一种后端接口服务方法，其特征在于，所述后端服务包括后端生产服务、后端测试服务和后端本地服务。


6.如权利要求5所述的一种后端接口服务方法，其特征在于，host根据后端服务部署环境进行切换。


7.一种APP校验服务方法，其特征在于，采用如权利要求1所述的解决前端本地开发跨域问题的方法。


8.如权利要求7所述的一种APP校验服务方法，其特征在于，所述APP校验服务方...

【专利技术属性】
技术研发人员：林贞伟，罗贇，
申请(专利权)人：千寻位置网络有限公司，
类型：发明
国别省市：上海;31