代理 URL 在角度 js 控制器上不起作用

Question

我正在使用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;
});
}); 

应用.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);

路由/用户.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并在请求数据并将其发送到 API 时使用/users。

我试图在前端的package.json上添加"proxy": "http://localhost:4007"但没有奏效。

我在这里找到了这个想法。

希望你对我有帮助。

Answer 1

由于您使用gulp和browser-sync作为构建工具和开发服务器。 从本教程。 代理将仅在开发服务器上完成。

代理会简单地将所有交易重定向到不同的服务器。 前/api/user=>localhost:4007/api/user.

按npm i -D http-proxy-middleware安装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这实际上不是一个好的做法。 相反，您应该以模式为目标 网址，例如

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

这将代理与此模式匹配的所有 URL，例如api/users/api/auth/meapi/profile/extra