Angular4.x跨域请求

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Angular4.x请求

码云地址:

https://gitee.com/ccsoftlucifer/Angular4Study

1. 搭建工程

新建一个工程angulardemo03

ng new angulardemo03

npm install 更新依赖

2. 新建组件

在app目录新建文件夹components,自己自定义的所有的组件都放在这个目录下面.

ng g component components/news

目录结构如下:

3.添加请求相关的model

编辑app.modle.ts

import { HttpClientModule } from '@angular/common/http';

@NgModule({
declarations: [
AppComponent,
NewsComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})

4.编写代码

news.component.html 编写一个按钮用来发送请求:

<h2>你好angular</h2>
<p>
news works!
</p><br>
<button (click)="requestData()">请求数据</button>
从服务器拿到的值:
{{value}}

news.component.ts编写逻辑,导入http服务

import { Component, OnInit } from '@angular/core'; import {HttpClient} from '@angular/common/http';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
public value:any
constructor(private http:HttpClient) { } ngOnInit() {
// this.http.get('http://localhost:8080/user/findUser?id=1')
// .subscribe(res=>{ this.value = res }) }
//请求数据方法
requestData(){
console.log('请求数据');
var url='http://localhost:8080/user/findUser?id=1';//这里定义一个地址,要允许跨域
this.http.get(url).subscribe(function(data){
console.log(data);
},function(err){
console.log(err);
})
} }

5.解决跨域

由于前端工程是localhost:4200,请求后端工程Localhost:8080,会出现跨域错误:

Access-Control-Allow-Origin' header is present on the requested resource.

解决办法:

5.1 在项目的根目录添加proxy.config.json文件

{
"/": {
"target": "http://localhost:8080/"
}
}

5.2修改package.json文件

"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},

5.3修改angular.json

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "angulardemo03:build",
"proxyConfig":"proxy.config.json"
},
"configurations": {
"production": {
"browserTarget": "angulardemo03:build:production"
}
}
},

5.4服务器端添加注解

@CrossOrigin(origins = "http://localhost:4200",allowCredentials = "true")

这样数据就拿过来了啦~

使用RxJS进行请求发送:

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver, concat } from 'rxjs';
import { map, filter, scan } from 'rxjs/operators';
import { webSocket } from 'rxjs/webSocket';
import { ajax } from 'rxjs/ajax';
import { TestScheduler } from 'rxjs/testing';

请求:

//另外一种请求方式
useRxJsRequestData(){
var _result=this;
console.log('请求数据');
if(this.inputValue==''){
//用户没有输入
alert('请先输入值');
}else{
//用户有输入的值
var url='http://localhost:8080/user/findUser?id='+this.inputValue;
this.http.get(url).subscribe(res =>{
console.log(res);
console.log(typeof(res));
console.log(res['id']);
var _this = this; _this.obj.id=res['id'];
_this.obj.useName=res['userName'];
_this.obj.password=res['password'];
_this.obj.age=res['age'];
})
//console.log(map);
}
}