The server interface cannot be accessed after vue is deployed

In Vue project development, sometimes we encounter a very common problem, that is, after the project deployment is completed, we cannot access the interface of the back-end server. This situation can be a big headache because it will cause the front-end page to be unable to display the back-end data, which will also prevent the project from running normally.

So, why does this problem occur? How to solve this problem? In this article, we will analyze and explain it from multiple aspects to help you solve this problem.

1. Browser cross-domain issues

Due to the same-origin policy of the browser, it is generally impossible to directly request interfaces from different sources. For example, if our Vue project runs on localhost:8080 and the back-end service request is on localhost:3000, then the front-end page cannot send requests to the back-end.

There are many ways to solve this problem, one of the solutions is to use a proxy. In Vue, we can configure the proxy by setting the devServer.proxy option in the config/index.js file. The example is as follows:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

The meaning of this configuration is that all requests starting with /api will be Proxy to http://localhost:3000. In this way, we can access the backend interface in the front-end page.

2. Back-end service CORS issues

In addition to the browser's same-origin policy, the back-end service itself may also have a CORS (cross-domain resource sharing) policy set. This may also cause the front-end page to be unable to access the back-end interface.

In order to solve this problem, we can use the following methods:

(1) Set the Access-Control-Allow-Origin header on the backend

If the backend allows all sources For access, we can set the Access-Control-Allow-Origin header on the backend. The example is as follows:

Access-Control-Allow-Origin: *

The meaning of this configuration is to allow front-end pages from all sources to access this interface. Of course, you can also set it to a specific domain name, such as:

Access-Control-Allow-Origin: http://localhost:8080

This method is very simple, but it should be noted that opening all sources may have security issues, so it is recommended to use a specific domain name in a production environment.

(2) Use jsonp method to request in Vue

If the backend does not allow the front end to directly request the interface, we can implement cross-domain requests by using jsonp method.

In Vue, you can use the vue-jsonp library to make jsonp requests. For example:

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

Vue.jsonp('http://example.com/data', {}).then((response) => {
  console.log(response)
})

This request will automatically add the callback parameter to the accessed interface address, thereby realizing cross-domain requests.

3. Network issues

Finally, we also need to consider network issues. Sometimes, the interface can indeed be accessed normally, but the front-end cannot access the back-end interface due to network problems.

In this case, we can check the network settings or use tools to perform network diagnosis. For example, you can use the ping command to diagnose the network in Windows:

ping example.com

If there is a problem with the network, we can solve the problem by repairing the network or replacing the network.

Summary

The above is the problem and solution of being unable to access the backend interface after deployment in the Vue project. It should be noted that the situation of each project is different, so it needs to be debugged and solved according to the specific situation. If none of the above solutions can solve the problem, you can consider seeking help from relevant technical personnel.

The above is the detailed content of The server interface cannot be accessed after vue is deployed. For more information, please follow other related articles on the PHP Chinese website!