Question

这个话题，据我所知，它非常新鲜且相关。告诉我我的错误在哪里？

所以，我在文档中做了所有事情：

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

Angular-cli版本：

....
  "devDependencies": {
    "@angular/cli": "1.2.0",
....

创建文件：proxy.conf.json

{
  "/profile/*": {
    "target": "http://localhost:8888",
    "secure": false,
    "pathRewrite": {
      "^/profile": ""
    },
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

我在package.json

中注册了它

....
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
....

按如下方式启动应用程序： npm start

这是开始日志：

> ng serve --proxy-config proxy.conf.json

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /profile  ->  http://localhost:8888
[HPM] Proxy rewrite rule created: "^/profile" ~> ""
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
Hash: 2f1f9b69df46574b900e
Time: 12544ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 131 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 255 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.79 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

问题肯定不在后端，因为在那里配置了cors。我用Fiddler监视我的请求。

以下是它现在的样子：

OPTIONS http://localhost:8888/profile/data/personal HTTP/1.1
Host: localhost:8888
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
x-ijt: c2q0qqq02it9p2jrk3m6ihbs5u
Access-Control-Request-Headers: content-type,x-auth-token
Accept: */*
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4

我们正在讨论此标题： x-auth-token

我也读过这个主题。

angular-cli server - how to proxy API requests to another server?

任何想法？感谢。

Answer 1

重新发布我在其他问题中发布的答案。

我必须根据上面的答案做一个小调整，虽然看起来现在看起来有点奇怪。

这是我的proxy.conf.json，如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div class="fullrow">
  <div class="leftcol">
    <div>Provider / Platform</div>
    <select name="platform_social" id="platform_social" onchange="otherps('');">
     <option value="" selected="selected">&nbsp;</option>
	 <option value="ASKfm">ASKfm</option>
	 <option value="Facebook">Facebook</option>
	 <option value="Flickr">Flickr</option>
	 <option value="GitHub">GitHub</option>
	 <option value="Google">Google+</option>
	 <option value="Instagram">Instagram</option>
	 <option value="JustPaste">JustPaste.it</option>
	 <option value="LinkedIn">LinkedIn</option>
	 <option value="Tumblr">Tumblr</option>
	 <option value="Twitter">Twitter</option>
	 <option value="Vine">Vine</option>
	 <option value="VKontakte">VKontakte (VK)</option>
	 <option value="YouTube">YouTube</option>
	 <option value="Other">Other</option>
    </select>
    <div id="othersocial" style="display:none;">
      <br>
      <div>Other Platform </div>
      <input type="text" name="otherplatform" id="otherplatform" /><br>
    </div>
  </div>

  <div class="rightcol">
    <div>Social Media Identifier</div>
    <input type="text" id="social_user" name="social_user" disabled />
  </div>
</div>

<div id="socialextra"></div>

<input type="hidden" name="socialadded" id="socialadded" value="0" />
<br>
<div class="fullrow">
  <div class="leftcol">
    <span class="addtravel"><a onclick="add_social()" 
    class="button medium dark">Add Another</a>&nbsp;&nbsp;</span>
  </div>
</div>
    
  </body>

</html>

基本上，我完全重写了这条道路。它现在有效。

在请求后端的自定义标头配置Angular-cli代理？

1 个答案: