angular cli 反向代理實現跨域

来源:https://www.cnblogs.com/shuangzikun/archive/2019/11/21/11904783.html
-Advertisement-
Play Games

版本: 1、後端實現跨域(php) header("Access-Control-Allow-Origin: *"); // // 響應類型 // header('Access-Control-Allow-Methods:POST'); // // 響應頭設置 // header('Access-C ...


版本:

 

 

 1、後端實現跨域(php)

header("Access-Control-Allow-Origin: *");
// // 響應類型
// header('Access-Control-Allow-Methods:POST');
// // 響應頭設置
// header('Access-Control-Allow-Headers:x-requested-with, content-type');

2、前端跨域 

項目目錄下新建proxy.config.json文件

 

 

 proxy.config.json

 

{
  "/api": {  
    "target": "http://localhost",    // php服務路徑
    "logLevel": "debug",  
    "changeOrigin": true, 
    "pathRewrite": { 
      "^/api": ""
    }
  }
}

package.json

{
  "name": "web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.config.json --open",   // 修改
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/material": "^8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@types/echarts": "^4.4.1",
    "@types/jquery": "^3.3.29",
    "chart.js": "^2.8.0",
    "crypto": "^1.0.1",
    "echarts": "^4.4.0",
    "express": "^4.17.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "mysql": "^2.17.1",
    "ngx-echarts": "^4.2.1",
    "primeflex": "^1.0.0",
    "primeicons": "^1.0.0",
    "primeng": "^7.1.3",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.1",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/jasmine": "^3.3.16",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.10.59",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "node-mysql": "^0.4.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

啟動使用 npm start

訪問使用 http:localhost:4200/api  就會映射到http:localhost

this.http.post('http://localhost:4200/api', {name: this.name, company: this.company, price: this.price }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).subscribe((res: any) => {
        if (res.resultCode == 200) {

        }
        // 載入成功之後做一些事
      }, (err: any) => {
      });

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JS基本語法 while迴圈 練習 練習1: 求6的階乘 var ji = 1;//存儲最終的階乘的結果 var i = 1;//開始的數字 while (i <= 6) { ji *= i; //ji=ji*i 加減乘除都可以這樣表示 i++; } console.log(ji); 練習2: 求1 ...
  • 筆記+小案例 1 <style> 2 3 .zi{ 4 height:100px; 5 width:100px; 6 background:purple; 7 margin:2px; 8 line-height:100px; 9 text-align: center; 10 color:#fff; ...
  • 父元素高度自適應,子元素 float 後,造成父元素高度為0,稱為高度塌陷問題。 推薦使用萬能清除法解決。(給需要清除浮動的元素添加一個class名 clear) 萬能清除法代碼 父元素:after{ content: ""; height: 0; clear: both; overflow: hi ...
  • 幾個點擊事件 1 <body> 2 <button>jq點擊</button> 3 <input type="button" id="btn1" value="第一種"> 4 <input type="button" id="btn2" value="第二種"> 5 <input type="but ...
  • 迴圈:一件事不停的或者是重覆的做 迴圈要有結束的條件,迴圈還應該有計數器(記錄迴圈的次數的) while迴圈 while迴圈語法: 計數器 var 變數=0; while(迴圈的條件){ 迴圈體; 計數器++; } 執行過程: 先判斷條件是否成立,(條件的結果是true還是false),如果是fal ...
  • 倒計時定時器 、 迴圈定時器 及定時器的清除 1 <body> 2 <div> 3 <input type="button" onclick="yi()" value="啟動倒計時定時器"> 4 <input type="button" onclick="er()" value="啟動迴圈定時器"> ...
  • 分支語句: if語句:一個分支 if-else語句:兩個分支,最終只執行一個分支 if-else if-else if...語句: 多個分支,也是只會執行一個 switch-case語句:多分支語句,最終也會一個(必須要有break) 三元表達式:和if-else語句是一樣的 什麼時候使用if-el ...
  • 當項目業務越來越複雜,打包出來的代碼會非常冗餘,文件體積會非常龐大。大體積文件會增加編譯時間,影響開發效率;如果直接上線,還會拉長請求和載入時長,影響網站體驗。作為一個追求極致體驗的攻城獅,是不能忍的。所以在多頁應用中優化打包尤為必要。那麼如何優化webpack打包呢? ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...