通过Observable从angular度发送POST请求到nodejs
我有一个Angular 5应用程序运行,并已configurationExpressJs作为后端,我遇到了一个问题,同时试图订阅在Angular中的observable我的angular应用程序运行在本地主机:4200和我的NodeJs应用程序正在本地主机上运行:3000。 我能够从angular度发送一个GET请求到节点完全好,但是当我尝试发送POST请求与一些数据我得到这个错误在Chrome开发工具:
无法加载localhost:3000 / user:只有协议scheme支持跨源请求:http,data,chrome,chrome-extension,https。
这似乎是angular甚至没有发送请求,因为我看不到在terminal中的任何活动。 我也尝试使用curl在terminal发送一个POST请求到我的Node应用程序,它似乎工作,所以我不认为这是一个CORS问题,但是我的angular码有问题。 这里是我的代码:Angular Service:
@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())); } }
angular度分量:
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 }); }); });
我正确地设置我的标题在节点:
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(); });
谢谢你提供的所有帮助 !!! 这真的让我头痛:(
无法加载localhost:3000 / user:只有协议scheme支持跨源请求:http,data,chrome,chrome-extension,https。
你只是缺less请求URL中的http:
协议部分。
replace这个:
return this.http.post('localhost:3000/user', body, {headers: headers})
…有了这个:
return this.http.post('http://localhost:3000/user', body, {headers: headers})
这可能是因为您正在将数据发布到localhost:3000 / user并正在侦听/注册。
@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())); } }
- Angular JWT Profile用户(获得JSON领域)
- 如何使用Mongoose,Express,Angular 4和NodeJS上传/保存和显示图片
- 无法检测到设置buildpack https://github.com/jasonswett/heroku-buildpack-nodejs
- 意外的令牌导入运行节点server.js
- 节点js路由期间的CORS问题
- angular2 quickstart究竟是如何工作的?
- 使用.ts,.scss,.html复制和观看文件夹
- 如何使用“内容types”:“application / x-www-form-urlencoded”发布Post请求?
- 当使用量angular器作为一个库时,'没有方法期待'