background

  1. Back-end API domain name: xx.beta1.xn
  2. Static server: localhost:8080 (the project is not in the corresponding directory of nginx, but also localhost proxy layer)
  3. The back-end interface does not support JSONP, does not add whitelists, and does not set related proxies

The problem

The interface provided by the back-end does not support cross-domain access, and front-end developers cannot access official data for interface intermodulation

General treatment

  • Case 1: in the [back-end interface not completed] phase, the backend can first provide static JSON data, and local mock data can be used for data binding. In this case, local static data is not cross-domain
  • Case 2: [Back-end interface completed] stage, and the interface does not support cross-domain, how does the front end access the interface data

How to use nginx proxy forwarding to solve cross-domain access

Steps:

  1. For Windows, go to the nginx website to download the related program (go to nginx.org/) and modify the configuration file

    Nginx-1.13.9 /conf/ nginx-1.13.9/conf/nginx.conf

server{
        listen  80;
        server_name  go.beta1.xn;
        # cross-domain request

        add_header 'Access-Control-Allow-Origin' The '*';  
        add_header 'Access-Control-Allow-Credentials' 'true'; Location / {proxy_pass http://127.0.0.1:8080; } location /app { proxy_pass http://xx.beta1.xn/app; }}Copy the code

This configuration means that if the local access to go.beta1.xn/app is actually forwarded to the cross-domain server, which is the yx.beta1.fn/app part of the code above

  1. Configure local host C:\Windows\System32\drivers\etc\hosts
127.0.0.1 go. Walk. XnCopy the code
  1. Code examples:
Post request:
let {data} = await api.post(`/app/goods/detail/${config.apiVersion}`,
Copy the code
Headers:
Request URL:http://go.beta1.xn/app/goods/detail/t109
Copy the code

Xn /app/goods/d…

conclusion

thank you