javascript - 从 AngularJS 访问我网站的 NodeJS Express API

Question

我需要使用 ionic 作为 UI 为我的网站开发一个混合应用程序，并且我正在使用 Node js 来创建 APi。问题是我能够通过浏览器访问 API，如果我从 AngularJS 调用相同的 API，我将无法检索响应。这是 Node js 端的代码:

var app = require('express')(); 
var http = require('http').Server(app); 
var mysql = require('mysql'); 
var bodyParser = require("body-parser");

var connection = mysql.createConnection({ 

    host : 'localhost',
    user : 'root',
    password : 'root',
    database : 'student',
});

app.use(bodyParser.urlencoded({ extended: false }));

app.use(bodyParser.json()); 

app.get('/stud',function(req,res){

    connection.query("SELECT * from stu_details",function(err, rows, fields){

        if (err) throw err;

        res.contentType('application/json');
        console.log("entered");
        res.send(JSON.stringify(rows));
        res.end();

    });

});

AngularJS 代码:

var app1 = angular.module('starter', ['ionic']);
app1.controller('mycontrl',function($scope,$http){

    $http.get("http://127.0.0.1:3000/stud")
    .then(function(response) {

        $scope.names = response.body;
    })
});

问题是，在 Angular 一侧，它没有进入“then”函数；即响应没有成功。但如果我从浏览器调用，我就能够获取正文部分。

Answer 1

那是因为您的应用程序正在不同的端口上运行。可能是 8100，而您的 Express 应用正在 3000 上运行。而该请求就是一个跨域的ajax请求。有几种方法可以解决这个问题。

1. 使用 Ionic 本身为您的 API 创建代理。 推荐

   将 ionic.project 文件添加或编辑到您的项目并进行配置:

   {
     "name": "your-app",
     "app_id": "",
     "proxies": [
       {
         "path": "/stud",
         "proxyUrl": "http://127.0.0.1:3000/stud"
       }
     ]
   }
   

   然后您可以正常在您的应用程序上请求 /stud，Ionic 会将该请求代理到您的 Express 应用程序。您可以将更多这些规则添加到上面的数组中。

   有关此的更多信息 here和 here .

2. 在 Express 应用中启用跨域资源共享 (CORS)。

   您可以找到如何做this thread .

3. 在浏览器上安装扩展程序以允许 CORS，但我不建议这样做，因为这可能会导致访问其他网站时出现问题。

此外，如果您使用这种架构，出于安全原因，您可以在 API 上使用 https。