Does Vue solve cross-domain problems?

CORS (Cross-domain Resource Sharing) Server changes headers

header('Access-Control-Allow-Origin:*'); // Allow all sources to Access header(' access-Control-allow-method :POST,GET'); // How to allow accessCopy the code

Use jSONP provided with JQuery

Plugins: [new webpack.provideplugin ({$: "Jquery ", jquery: "jquery"})], // import $from 'jquery' in main.js { getData () { var self = this $.ajax({ url: 'http://x.xxx.cn/index.json', type: 'GET', dataType: 'JSONP', success: function (res) { self.data = res.data } }) } }Copy the code

Use the HTTP-proxy-Middleware proxy (project using vuE-CLI scaffolding)

  1. Open config/index.js and add the following code to the proxyTable:
ProxyTable: {'/ API ': {// Yes back-end API subpath target: 'http://f.apiplus.cn', //API domain name changeOrigin: true, // Whether to change the original domain name "secure": false, "logLevel": "debug" } }Copy the code

2) Modify startup instructions in package.json file:

"scripts": {
    "ng": "ng",
    "start": "ng serve --dev --proxy-config proxy.conf.json",
    ...
  },
Copy the code

Added the startup parameter –proxy-config to the newly created file. Here the agent is started using the agent file configuration.

  1. Use “/ API” directly when requesting data using AXIos:
getData () { 
 axios.get('/api/xxxx', function (res) { 
   console.log(res) 
 })
Copy the code