How to solve cross-domain issues between api server and front-end server?-PHP Tutorial-php.cn

How to solve cross-domain issues between api server and front-end server?

WBOY

Release： 2016-08-18 09:15:43

Original

1227 people have browsed it

The browser requests static resources from the front-end server, such as HTML, CSS, etc.
Then the browser makes an ajax request to the api server, causing a cross-domain problem.

My current plan is to put both front-end and back-end resources under the same domain name, but it doesn’t feel very reasonable.
The second is to use a reverse proxy, but I haven’t tried it before and I don’t know if it is appropriate.

How to solve this problem through the backend?

Reply content:

The browser requests static resources from the front-end server, such as HTML, CSS, etc.

Then the browser makes an ajax request to the api server, which creates a cross-domain problem.

My current plan is to put both front-end and back-end resources under the same domain name, but it doesn’t feel very reasonable.

The second is to use a reverse proxy, but I haven’t tried it before and I don’t know if it is appropriate.

How to solve this problem through the backend?

Basically there are the following solutions for cross-domain

The api server just needs to set the cross-domain header. If you write it in spring, you can use code similar to the following

<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>

Copy after login

For example, there are two projects: P and API

Then the calling method is similar: P front end -》P back end -》API

The subject’s backend is Nodejs. You can use the following code to achieve cross-domain. If it is express, it is recommended to package it into 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>

Copy after login

The best answer is already there, don’t forget to use withCredentials: true when requesting to bring cookies

jsonp can be used as a reference

Access-Control-Allow-Origin: Front-end domain name

Personally, I think it’s most reliable to use a reverse proxy

It may be more convenient to use nginx for reverse proxy, but setting cross-domain response headers is not fully compatible with IE

Reverse proxy is relatively simple

If the back-end code written by node uses express/koa, you can directly introduce the cors() middleware into the back-end code

It is more convenient to use nginx as a reverse proxy

Just put a js file on the API server and reference it on the front end. Then there will be no cross-domain problems, just like the logic of calling external statistics.