Describes how to request cross-origin requests for projects created by Vue-cli.

Describes how to request cross-origin requests for projects created by Vue-cli.

Problem description:

For a project created using Vue-cli, the development address is localhost: 8023. You need to access the interface on localhost: 9000.

Cause analysis:

Cross-origin requests are required for access between different domain names. There are many cross-origin methods, which usually require background configuration.

However, projects created by Vue-cli can directly use the Node. js proxy server to implement cross-origin requests.

 Solution:

The interface address is originally/form/save, but to match the proxy address, add a/api

If axios is used, you can configure a baseURL globally, so you do not need to modify the url one by one.

Axios. defaults. baseURL = '/api'

Add the configuration item proxyTable in config> index. js dev:

ProxyTable: {'/api': {target: 'http: // 127.0.0.1: 9000/', changeOrigin: true, pathRewrite: {' ^/api ': '/'}}},

The '/api' is the matching item, and the target is the requested address.

Because the prefix '/api' is added to the ajax url, and the original interface does not have this prefix

Therefore, we need to rewrite the address through pathRewrite and convert the prefix '/api' '/'

If the interface address has the generic prefix '/api', you can delete pathRewrite.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.