问题产生的原因是浏览器的跨域限制,需要在服务端进行 CORS(跨域资源共享)配置。CORS 配置能使服务器允许客户端跨域请求资源。
下面是一个示例:
服务端 (NodeJS+Express)
var express = require('express')
var app = express()
//允许任何域名访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Headers", "Content-Type")
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS")
next()
})
app.listen(3000) //监听3000端口
客户端代码:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class TestService {
constructor(private http: HttpClient) {}
testPut(): Observable {
const url = 'http://localhost:3000/test';//服务端URL
const headers = new HttpHeaders({'Content-Type': 'application/json'});
const body = JSON.stringify({test: 'test'});
return this.http.put(url, body, {headers: headers});
}
}
如果您需要更多的帮助,建议您查阅 Angular 官方文档和相关资源。