前端接口调试跨域问题

对于前后的分离的项目开发,前端工作人员常常需要调试后端接口,这时候一般都会出现跨域问题,正对跨域使用的各种解决方法,现提供两中比较简单的方案和案例,便于大家学习开发。

使用gulp构建工具的

如果你使用了gulp构建工具,你需要引入

var connect = require('gulp-connect');

var proxy = require('http-proxy-middleware');这两个插件,并定义server任务

gulp.task('server', function() {
  connect.server({
    root: ['build/h5/dev/'], //监听的文件所在位置
    port: 8084, //想监听的端口号,可以不用apache
    livereload: true,
    middleware: function(connect, opt) {
      return [
        //api/call/:ajax请求拦截的
        proxy('/api/call', {
          //此处根据情况加端口与不加端口
          //域名可以不加端口
          //IP要加端口
          //http://www.pig-2.com
          target: 'http://116.62.222.82:8082',
          changeOrigin: true
        })
      ]
    }
  });
});

使用webpack构建工具的

1 引入webpack-dev-server插件
2.在webpack.config.js中配置

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    hot: true,
    port: 8081,
    // host: '0.0.0.0',
    proxy: {
      '/api/v1': {
        target: 'http://192.168.0.130',
        pathRewrite: { '^/api/v1': '/api/v1' },
        changeOrigin: true
      }
    }
  },

3.node 运行webpack-dev-server服务器

使用nginx反向代理(window系统下)

1.下载nginx
2.安装好之后,修改nginx.conf文件如下

 server {
        listen       801;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   D:\h5-vue\dist;
            index  index.html index.
        }
        location ^~/v1 {//正则表达式,以v1开头的ajax接口请求
            proxy_pass http://www.pig-2.com:8081;//真实的请求路径
        }
}

利用apache cores技术的(后端设置)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,524评论 1 32
  • nodejs服务实现反向代理,解决本地开发接口请求跨域问题 前后端分离项目需要解决第一个问题就是,前端本地开发时如...
    莫逐阅读 61,038评论 0 4
  • brackets 1.5下载地址选择安装对应的版本,安装完成之后,我们修改成中文版本。找到菜单栏的debug --...
    pauljun阅读 7,844评论 2 3
  • 6月中旬去伦敦,遇上维多利亚和阿尔伯特博物馆(V&A)做平克·弗洛伊德特展。门票20镑。据说脱欧以后,英国消费物价...
    熊燕在樱园阅读 821评论 0 2