api伺服器與前端伺服器之間如何解決跨網域問題？

瀏覽器請求前端伺服器的靜態資源，HTML、CSS之類的，
然後瀏覽器再進行ajax請求api伺服器，產生了跨域問題。

我目前想的方案，
一是把前後端資源都置於同一域名下，但是感覺不是太合理。
二是使用反向代理，但沒弄過不清楚是不是合適。

請問如何透過後端解決此問題呢？

回覆內容：

瀏覽器請求前端伺服器的靜態資源，HTML、CSS之類的，
然後瀏覽器再進行ajax請求api伺服器，產生了跨域問題。

我目前想的方案，
一是把前後端資源都置於同一域名下，但是感覺不是太合理。
二是使用反向代理，但沒弄過不清楚是不是合適。

請問如何透過後端解決此問題呢？

跨域基本上有以下解決方案

1. JSONP

2. CORS

3. window.name

4. document.domain

5. 5.location.hash

6. 6.window.postMessage()

具體可參考以下文章https://github.com/rccoder/bl...

api伺服器設定跨域頭即可，如果你是spring寫的，可以用類似如下的程式碼

<code>@Component
public class CorsFilter implements Filter {
    @Override
    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;

        response.setHeader("Access-Control-Allow-Origin", "你的前端服务器地址");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE, HEAD, PATCH");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, X-Auth-Token, Content-Type");
        response.setHeader("Access-Control-Expose-Headers", "X-Requested-With, X-Auth-Token, Content-Type, X-TOTAL-COUNT");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        if (!"OPTIONS".equalsIgnoreCase(request.getMethod())) {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void init(FilterConfig config) throws ServletException {
    }
}</code>

舉例，有兩個項目：P 以及 API

那麼呼叫方式類似：P前端 -》P後端 -》API

題主後端Nodejs的，可以採用一下程式碼實作跨域，如果是express，建議包裝成middleware

<code>res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
res.setHeader('Access-Control-Allow-Credentials', true);
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers','x-requested-with,content-type');</code>

最佳答案已經有了，別忘了請求的時候 withCredentials: true 以帶上 cookie

jsonp 可以參考下

Access-Control-Allow-Origin:前端網域名稱

個人覺得還是利用反向代理最可靠

可能使用nginx進行反向代理比較方便，設定跨域回應頭並不能全部相容IE

反向代理比較簡單

node 寫的後台程式碼採用express/koa的話直接在後端程式碼裡引入cors()中間件即可

用nginx做反向代理比較方便呢

隨便在API伺服器上放個js文件，前端引用一下，之後是不是就沒有跨域問題了，就像調用外部統計那種邏輯。