如何使用Angular2向外部API發送POST請求？

我正在嘗試利用CORS發佈帖子請求。我偶然發現了幾篇與CORS相關的文章/答案，但不知何故無法正常工作。如何使用Angular2向外部API發送POST請求？

據我所知，access-control-allow-origin: *將被設置在服務器端來得到這個工作，但我在這裏是一個角 - cli項目。

我的項目純粹是基於Angular 2.1的，並且沒有涉及後端服務器。有關如何正確設置它的任何建議將受到高度讚賞。

是我得到確切的錯誤是這樣的：

"NetworkError: 404 Not Found - https://flowxo.com/hooks/a/rbpja7r2/?usertype=User"

和此警告在控制檯：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the 
remote resource at https://flowxo.com/hooks/a/rbpja7r2/?usertype=User. 
(Reason: CORS header 'Access-Control-Allow-Origin' missing).

更新：

這裏是我如何努力使POST請求：

let headers = new Headers(); 
headers.append('Access-Control-Allow-Headers', 'Content-Type'); 
headers.append('Content-Type', 'application/json'); 
headers.append('Access-Control-Allow-Methods', 'POST, OPTIONS'); 
headers.append('Access-Control-Allow-Origin', '*'); 
return this.http.post(
    this.flowxoUrl, 
    JSON.stringify(formData), 
    {headers: headers} 
) 
    .map((res:Response) => res.json()) 
    .catch((error:any) => Observable.throw(error.json().error || 'Server error')); //...errors if any

來源

2017-01-10 steady_daddy

你可以分享你的服務器端代碼，也有一些鍍鉻的插件，使人們有可能使CORS請求。 –

不涉及後端服務器 –

在這種情況下，您將需要使用Chrome插件，該插件應該可以工作https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=zh-CN –

這是服務器端問題，而不是Angular。

您的服務器應迴應Access-Control-Allow-Origin表頭。

的Java（春季）例如：

@Component 
@Order(Ordered.HIGHEST_PRECEDENCE) 
public class SimpleCorsFilter implements Filter { 
    @Override 
    public void init(FilterConfig filterConfig) throws ServletException {} 

    @Override 
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { 
     HttpServletResponse response = (HttpServletResponse) servletResponse; 
     HttpServletRequest request = (HttpServletRequest) servletRequest; 
     response.setHeader("Access-Control-Allow-Origin", "*"); //you can specify domains here * - is a wildcard, it will allow all origins to request 
     response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT"); 
     response.setHeader("Access-Control-Max-Age", "3600"); 
     response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, content-type"); 

     if("OPTIONS".equalsIgnoreCase(request.getMethod())) { 
      response.setStatus(HttpServletResponse.SC_OK); 
     } else { 
      filterChain.doFilter(servletRequest, servletResponse); 
     } 
    } 

    @Override 
    public void destroy() {} 
}

來源

2017-01-10 07:25:14

這是我的問題。如果項目不涉及後端服務器，我是否可以不使用CORS？ –

它涉及後端服務器。它是你的還是不是。如果服務器所有者不允許您的前端來源進行查詢，則無法執行任何操作。 –

這是完全有道理的，但我的問題在於我是否正確地做事情？請使用代碼查看更新後的問題。 –

如何使用Angular2向外部API發送POST請求？

回答

相關問題