Question

我运行了一个Angular 5应用程序，并将ExpressJs配置为后端，我在尝试订阅Angular中的observable时遇到了问题。我的angular应用程序在localhost：4200上运行，我的NodeJs应用程序是在localhost：3000上运行。我能够从angular到node发送GET请求完全正常，但是当我尝试发送带有一些数据的POST请求时，我在Chrome开发工具中收到此错误：

无法加载localhost：3000 / user：仅支持协议方案的跨源请求：http，data，chrome，chrome-extension，https。

似乎angular甚至没有发送请求，因为我在终端中看不到任何活动。我也尝试使用终端中的curl向我的Node应用程序发送POST请求，它似乎工作，所以我不认为这是一个CORS问题，但我的角度代码有问题。这是我的代码：角度服务：

@Injectable()
export class AuthService {
    constructor(private http: Http){}

       register(user: User) {
           const body = JSON.stringify(user);
           const headers = new Headers({ 'content-Type': 
           'application/json'});
           return this.http.post('localhost:3000/user/register', body, {headers: headers})
                    .map((response: Response) => response.json())
                    .catch((error: Response) => Observable.throw(error.json()));

    }

}

角度组件：

onSubmit() {
    const user = new User(this.registrationForm.value.email,
                            this.registrationForm.value.password,
                            this.registrationForm.value.firstName,
                            this.registrationForm.value.lastName);
    this.authService.register(user)
                    .subscribe(
                        data => console.log(data),
                        error => console.log(error)
                    );
    this.registrationForm.reset();
}

不确定这是否相关，但这是我的此请求的后端代码：

router.post('/register', function(req,res,next){
    var user = new User({
        firstName: req.body.firstName,
        lastName: req.body.lastName,
        password: bcrypt.hashSync(req.body.password, 10),
        email: req.body.email
    });
    user.save(function(err, result){
        if (err) {
            return res.status(500).json({
                title: 'Error while saving user',
                error: err
            });
        }
        res.status(201).json({
            message: 'User created',
            obj: result
        });
    });
});

我正在Node中正确设置标题：

app.options(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

感谢您提供任何帮助！这真让我头疼:(

Answer 1

无法加载localhost：3000 / user：仅支持协议方案的跨源请求：http，data，chrome，chrome-extension，https。

您只是错过了请求网址中的http:协议部分。

替换它：

return this.http.post('localhost:3000/user', body, {headers: headers})

......用这个：

return this.http.post('http://localhost:3000/user', body, {headers: headers})

Answer 2

可能是因为您要将数据发布到localhost：3000 / user并收听/ register ..

    @Injectable()
        export class AuthService {
            constructor(private http: Http){}

               register(user: User) {
                   const body = JSON.stringify(user);
                   const headers = new Headers({ 'content-Type': 
                   'application/json'});

                  // 'localhost:3000/user' change this to http://localhost:3000/user/register

                   return this.http.post('localhost:3000/user', body, {headers: headers})
                            .map((response: Response) => response.json())
                            .catch((error: Response) => Observable.throw(error.json()));

            }

        }

通过Observable从角度发送POST请求到nodejs

2 个答案: