URL прокси не работает на угловом контроллере js - PullRequest
Новая
       10

URL прокси не работает на угловом контроллере js

0 голосов
/ 22 октября 2018

Я работаю над приложением, использующим expressjs и angularjs .

Я создаю свой бэкэнд, используя Экспресс-генератор Установите некоторые инструменты, такие какmysql, анализатор тела и cors.

На моем внешнем интерфейсе я использую gulp вместе с angularjs.

Это мой контроллер 

    app.controller('homeCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "http://localhost:4007/users"
    }).then(function mySuccess(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});

App.js 

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

var mysql = require("mysql");

app.use(function(req, res, next){ 
  res.locals.connection = mysql.createConnection({ 
    host : 'localhost', 
    user : 'root', 
    password : '', 
    database : 'test'
  }); 
  res.locals.connection.connect(); 
  next(); 
});

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

const cors = require('cors')

var corsOptions = {
  origin: 'http://localhost:3000',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
}

app.use(cors(corsOptions))

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


var http = require('http');
module.exports = app;
var server = http.createServer(app);
server.listen(4007);

route / users.js 

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.locals.connection.query('SELECT * from users', function (error, results, fields) {
   if(error) throw error;
   res.send(JSON.stringify(results));
 });
});

На самом деле код работает нормально, я могу отправить и получить запросиз бэкэнда.

я пытаюсь добиться того, как я могу удалить http://localhost:4007 и просто использовать /users при запросе и отправке данных в API.

Я пыталсядобавить "proxy": "http://localhost:4007" в package.json на моем веб-интерфейсе, но он не работал.

Я нашел идею здесь .

Надеюсь, вы мне поможете.

1 Ответ

0 голосов
/ 24 октября 2018

Поскольку вы используете gulp и browser-sync в качестве инструмента сборки и сервера разработки.из этого учебника.прокси будет сделан только на сервере разработки.

прокси просто перенаправит весь ваш трафик на другой сервер.ex /api/user => localhost:4007/api/user.

установить http-proxy-middleware от npm i -D http-proxy-middleware

обновить ваш gulp следующим образом. 

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

var proxyMiddleware = require('http-proxy-middleware');

var proxy = proxyMiddleware('/user', {target: 'localhost:4007/users'});

gulp.task('serve', ['sass'], function() {

browserSync.init({
    server: "./src" ,
    middleware: [proxy] 
});

здесь /users будет прокси localhost:4006/users на самом деле это не очень хорошая практика.вместо этого вы должны выбрать шаблон URL ex.

var proxy = proxyMiddleware('/api/*', {target: 'localhost:4007'});

это будет прокси все URL, которые соответствуют этому шаблону, как api/users/ api/auth/me api/profile/extra

...