grunt-connect-proxy解决开发时跨域问题

最近的项目中前后端是完全分离开发的,前端用grunt管理项目。这样就会导致一个问题:开发时前端调用后台的接口时因为不在一个服务器,所以会出现跨域问题。但是也不能用JSONP或CROS方式实现真正的跨域,因为项目发布时其实是在同一个服务器下的。

这时候我们的grunt-connect-proxy就出场了,它就是专门解决这个问题的。

具体配置:

1. 先下载安装这个组件

npm install grunt-connect-proxy --save-dev

这里要注意:一定要提前先装上grunt-contrib-livereload这个组件,不然grunt serve时会总是报错

2.增加配置

var lrSnippet = require(‘grunt-contrib-livereload/lib/utils‘).livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require(‘path‘).resolve(dir));
};
var proxySnippet = require(‘grunt-connect-proxy/lib/utils‘).proxyRequest;

这断代码要加在gruntfile.js顶部,module.exports上边。

然后,再connect中添加proxy配置及livereload配置

connect: {
      options: {
        port: 9000,
        open: true,
        livereload: 35729,
        // Change this to ‘0.0.0.0‘ to access the server from outside
        hostname: ‘localhost‘
      },
      proxies: [
                {
                    context: ‘/website‘,
                    host: ‘www.somesite.com‘,
                    port: 80,
                    https: false,
                    changeOrigin: true
                }
            ],
      livereload: {
        options: {
          middleware: function (connect) {
                        return [
                            lrSnippet,
                            mountFolder(connect, ‘.tmp‘),
                            connect().use(‘/bower_components‘, connect.static(‘./bower_components‘)),
                            mountFolder(connect, config.app),
                            proxySnippet,
                        ];
                    }
        }
      },
/***/
}

接下来,再serve这个task里添加proxy

grunt.task.run([
      ‘clean:server‘,
      ‘wiredep‘,
      ‘concurrent:server‘,
      ‘autoprefixer‘,
      ‘configureProxies‘,     //增加到livereload前边
      ‘connect:livereload‘,
      ‘watch‘
    ]);

OK,到这里代理就加上了!

参考:

https://github.com/drewzboto/grunt-connect-proxy

http://fettblog.eu/blog/2013/09/20/using-grunt-connect-proxy/

http://www.himysql.com/2014/07/29/grunt-connect-proxy-configure/

http://www.ngnice.com/posts/76c4bd0f7a4cdc

时间: 2024-10-31 06:08:06

grunt-connect-proxy解决开发时跨域问题的相关文章

nodejs 代理 解决开发环境跨域问题

前后端分离项目中,会遇到跨域问题.解决方法无非就是jsonp cors等. 本次项目前端不搭node服务,线上用nginx搭站点,nginx转发ajax请求server. 本地开发环境的跨域问题用node做代理转发请求server(完美解决开发环境下请求server的跨域问题). node代码如下 "use strict"; const express = require('express'); const path = require('path'); const app = exp

使用vue-cli开发时跨域问题

打开config文件夹下的index.js,配置proxyTable: 其中,taget是要访问的api的域名,配置完proxyTable后,若要访问'http://apis.haoservice.com/lifeservice/chicken/duck',ajax里的url只需设为'/lifeservice/chicken/duck'(即绝对路径)即可

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

使用Spring Session和Redis解决分布式Session跨域共享问题

前言 对于分布式使用Nginx+Tomcat实现负载均衡,最常用的均衡算法有IP_Hash.轮训.根据权重.随机等.不管对于哪一种负载均衡算法,由于Nginx对不同的请求分发到某一个Tomcat,Tomcat在运行的时候分别是不同的容器里,因此会出现session不同步或者丢失的问题. 文末分享了我一部分私人收藏 有兴趣的可以收藏看一下的 都是架构师进阶的内容 实际上实现Session共享的方案很多,其中一种常用的就是使用Tomcat.Jetty等服务器提供的Session共享功能,将Sessi

Redis实战和核心原理详解(5)使用Spring Session和Redis解决分布式Session跨域共享问题

Redis实战和核心原理详解(6)使用Spring Session和Redis解决分布式Session跨域共享问题 前言 对于分布式使用Nginx+Tomcat实现负载均衡,最常用的均衡算法有IP_Hash.轮训.根据权重.随机等.不管对于哪一种负载均衡算法,由于Nginx对不同的请求分发到某一个Tomcat,Tomcat在运行的时候分别是不同的容器里,因此会出现session不同步或者丢失的问题. 实际上实现Session共享的方案很多,其中一种常用的就是使用Tomcat.Jetty等服务器提

Node.js配合node-http-proxy解决本地开发ajax跨域问题

情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. CORS跨域:后端接口在返回的时候,在header中加入'Access-Control-Allow-origin':* 之类的(有的时候后端不方便这样处理,前端就蛋疼了) 3. 用nodejs搭建本地http服务器,并且判断访问接口URL时进行转发,完美解决本地开发时候的跨域问题. 用到的技术: 1

Java开发中解决Js的跨域问题

主流方法有JSONP和CORS两种,这里记一下后者的方式,理论基础就是在请求的时候在http请求头中添加如下属性: //指定允许其他域名访问 Access-Control-Allow-Origin:http://localhost:8989 如果后端用Java开发,在返回请求中可以添加如下属性 1.在跨域问题中,如果不操作cookie,只需要在后端代码中添加如下代码就可以 response.setHeader("Access-Control-Allow-Origin", "h

解决Geoserver请求跨域的几种思路

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景描述 跨域问题是浏览器同源安全制引起的特别常见的问题.不同前端语言针对跨域解决方法有所区别.比如Flex语言做跨域请求时,如果中间件存有跨域文件(crossdomain.xml)则可以轻松实现跨域. 而JS开发的前端,针对GET请求则又可以通过JSONP方式解决.补充一下JSONP的原理:通过创建一个 script 标签,将 src 设置为目标请求,插入到 DO

解决Geoserver请求跨域的几种思路,第二种思路用过

1.背景描述 跨域问题是浏览器同源安全制引起的特别常见的问题.不同前端语言针对跨域解决方法有所区别.比如Flex语言做跨域请求时,如果中间件存有跨域文件(crossdomain.xml)则可以轻松实现跨域. 而JS开发的前端,针对GET请求则又可以通过JSONP方式解决.补充一下JSONP的原理:通过创建一个 script 标签,将 src 设置为目标请求,插入到 DOM中,服务器接受该请求并返回数据,数据通常被包裹在回调钩子中.根据JSONP的实现原理,我们可以看到其无法支持POST请求方式.