1. 程式人生 > >Angular 解決跨域 配置代理 (適用於Angular2+)

Angular 解決跨域 配置代理 (適用於Angular2+)

1. 新建proxy.conf.json 檔案 內容如下:

{    "/api": {        "target": "http://124.77.3.162:8888",        "secure": false,        "router" : {        "/v1/index": "http://125.78.3.162:8888",        "/v1/finances": "http://124.77.3.162:8888"     }     }}上面程式碼最終訪問結果:http://124.77.3.162:8888/api/v1/finances

2. 在package.json檔案中引入代理檔案  修改scripts

start

{ "name": "yqfx", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve --sourcemap=false--host 0.0.0.0 --proxy-config proxy.conf.json", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e"
: "protractor" }, "private": true, "dependencies": { "@angular/common": "^2.3.1", "@angular/compiler": "^2.3.1", "@angular/core": "^2.3.1", "@angular/forms": "^2.3.1", "@angular/http": "^2.3.1", "@angular/platform-browser": "^2.3.1", "@angular/platform-browser-dynamic": "^2.3.1", "@angular/router"
: "^3.3.1", "core-js": "^2.4.1", "echarts-ng2": "^1.4.1", "primeng": "1.1.4", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", "zone.js": "^0.7.2" }, "devDependencies": { "@angular/compiler-cli": "^2.3.1", "@types/echarts": "0.0.9", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.28.3", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.3.0", "typescript": "~2.0.3" }}

3. 在service中地址寫法如下,就能匹配到 http://124.77.3.162:8888/api/v1/finances

getConditionList(id): Promise<any> {
let headers = new Headers({ 'Content-Type': 'application/json' }); return this.http .get("/api/v1/finances/getCondition", { headers: headers }) .toPromise() .then(response => { return response.json() as any; }) .catch(this.handleError); }

相關推薦

Angular 解決 配置代理 用於Angular2+

1. 新建proxy.conf.json 檔案 內容如下:{    "/api": {        "target": "http://124.77.3.162:8888",        "secure": false,        "router" : {      

Angular primeng tree 元件資料解析用於Angular2+

1.專案中引入 primeng tree元件 import{TreeModule}from'primeng/tree'; import{TreeNode}from'primeng/api'; 2.本文講解把一個後臺返回資料,轉化成tree需要的型別 後臺返回json如下:

資源請求除jsonp以外的方法

ive 默認 發現 情況下 coff 瀏覽器 過程 -i link -------------------------------------------------------------------------------------------------

同源、、jsonp面試常問

          提到跨域,就不得不說一下同源策略,同源策略是瀏覽器的一種安全策略,也就說a網站不能隨便讀取b網站的內容,試想一下,如果網站之間都可以隨便讀取互相的檔案,比如一個黑客程式,他利用IF

eclipse + maven 配置 SSM 專案環境用於 idea

idea 編輯器自己新建一個 maven 專案後,其他的照著下面做就行。 開始寫教程前,我已經建立了一個用於 web 開發的 maven 專案了,所以還不會建立 maven 專案的同學,可以看我的上一篇部落格,教程比較簡單的,跟著一步步做就行,很適合小白看的:https:/

瀏覽器的同源策略和詳解內含故事解析

前言 去年這個時候有寫過一篇文章叫《ajax中的json和jsonp詳解》,寫這個文章是因為我朋友學習前端剛好遇到了這個問題,但是就在昨天,他在學習java的時候又遇到同樣的問題,看來我又要操作一波了。(實則我就他這一個朋友)(๑→ܫ←) 提綱內容 重述一遍何為同源策略(因為之前講過) 跨域的三種方式 剖析

2019 模板開發基礎指南用於emlog5

本文分析emlog5下的模板基本結構以及基本變數、函式的作用,詳細瞭解本文,有助於更快掌握emlog5的模板開發基礎。 emlog的模板位於安裝目錄content\templates\資料夾下,每個模板都是一個單獨的資料夾,資料夾以模板名字命名。通過後臺上傳安裝的模板都儲存在這個目錄下。 模板檔

SpringBoot 實現WebSocket進行訊息傳送用於SpringMVC

Spring框架中自帶了WebSocket的jar包,利用它可以實現與H5中WebSocket進行對接,實現互動。使用Spring WebSocket並不複雜,下面一起來看下怎麼實現吧(注:本例子是通過SpringBoot構建的專案,除了專案的啟動程式碼配置不一

為升級後的Linux核心打包用於ubuntu

打包替換核心 打包替換新核心使用的是make-kpkg命令,所以此方法只適合支援make-kpkg命令的系統版本,一般適合Ubuntu、Debian等系統,不適合RedHat系統。 1、定製核心 #make mrprobe ,清理原始碼樹。 #make menuco

SQL Server2012遠端訪問設定用於2008

SQL2008或者SQL2012出現未開啟遠端連線的錯誤。下面總結了下開啟的方法。 1.開啟SQL server2012,使用windows身份登入 2.登入server後,右鍵“屬性”。左側選擇“安全性”,選中右側的“SQL Server 和 Windows 身份驗證模

Nginx反向代理配置解決問題

一. 跨域    指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的,是瀏覽器對 JavaScript 施加的安全限制。 實際開發過程中表現為,如果本地的Html程式碼未提交到伺服器,本地是不能直接呼叫伺服器 API 獲取資料的。 二. Nginx

基於angular-cli配置代理解決請求問題

1.跨域請求產生 隨著不同終端(Pad/Mobile/PC)的興起,對開發人員的要求越來越高,純瀏覽器端的響應式已經不能滿足使用者體驗的高要求,我們往往需要針對不同的終端開發定製的版本。為了提升開發效率,前後端分離的需求越來越被重視,後端負責業務/資料介面,前端負責展現/互動邏輯,

vue專案中webpack配置代理解決問題

在config資料夾中的index.js檔案配置 主要是這句話 proxyTable: { //本地測試介面 '/': { target: 'http://xx.xx.xx.xx', changeOrigin: true, sec

vue本地代理解決問題

本文只針對axios+vue/cil3.0 axios配置: const http = axios.create({ baseURL: process.env.NODE_ENV === 'production' ? 'http://www.xxxxx.com/': '', //這裡是關鍵

一個 Yii + vue 專案3 解決、資料庫配置

ok,有了基礎的環境,就可以寫功能了,首先要實現的功能就是 登陸驗證,這個時候我們還需要建一個數據庫,我在本地建了個數據庫,添加了一個簡單的表 user: user 表的 name 欄位是用來儲存使用者的名字的,而 username 和 password 則是對應的賬號密碼,考慮到

我也說說Nginx解決前端問題,正確的Nginx配置後端Nginx CORS配置、CORS設定,後端允許請求

最近連續兩個朋友問我跨域相關問題,我猜想可能不少朋友也遇到類似問題,我打算寫個部落格聊一下我實際使用的配置, 先說明一下,我並不太瞭解這配置,沒精力去了解太多,但我覺得其中有一些關鍵的小注意點,可能有些初學者不太注意到,導致配置有問題,本文章可能只對新手有點幫助,如果你有好

vue 配置代理 解決問題

vue-cli專案 配置代理 解決跨域問題 問題描述 因為是自己寫前端也要自己寫介面,我使用的nodejs+express開的服務寫介面 但是vue 專案 執行除錯時會佔用一個埠 而n

【機房報修管理系統】後端篇 配置Cros解決問題

一、前情提要     上一次我們使用了MyBatisGenerator解決了實體層和Dao層的開發,這一次我們來解決Cros跨域問題。 二、任務詳情 配置Cros攔截器 三、相關介紹 1.什麼是跨

nginx配置解決問題【初學者】詳細教程

解壓後開啟nginx資料夾 3.啟動nginx,當前資料夾下開啟cmd命令視窗(當前資料夾位址列輸入cmd直接回車也行) 啟動命令:nginx.exe 重新整理配置重啟:nginx.

Spring MVC配置CORS解決請求

1. CORS 簡介 同源策略(same origin policy)是瀏覽器安全的基石。在同源策略的限制下,非同源的網站之間不能傳送 ajax 請求的。 CORS 做到了兩點: 不破壞即有規則伺服器實現了 CORS 介面,就可以跨源通訊基於這兩點,CORS 將請求分為兩