In the VUE project, when the front end and the background make data request or submit, if the background does not set cross-domain, No ‘access-Control-allow-origin’ header is present on the requested resource.

First, turn off the same origin policy in Chrome so there are no cross-domain issues. Window Create a chrome. Exe shortcut and close all Chrome browsers

// Open chrome browser-a "Google Chrome"--args --disable-web-security --user-data-dir // Safari open-a '/Applications/Safari.app' --args --disable-web-security --user-data-dir
Copy the code

Linux

chromium-browser --disable-web-security
Copy the code

Use HTTP-proxy-Middleware proxy (vuE-CLI scaffolding)

For example, the request url: “l – test12. Dev. Cn2. Corp. agrant. Cn: 8080 / API/auth/lo…

1, open config/index.js and add the following code to proxyTable:

proxyTable: { 
  '/newretail': {  
    target: 'http://l-test12.dev.cn2.corp.agrant.cn:8080', // Source address changeOrigin:true// Change the source pathRewrite: {'^/newretail': 'http://l-test12.dev.cn2.corp.agrant.cn:8080'// Path overwrite}}}Copy the code

That will do,

Use ‘/newretail’ directly when requesting data using AXIos

getData() {
 axios.get('/newretail/api/auth/login'.function(res) {/ / actual request is "http://l-test12.dev.cn2.corp.agrant.cn:8080/api/auth/login" the console log (res)})}Copy the code

2. Since this agent is actually a local node service, equivalent to a local background, and then localhose8080, for example, if you are developing on your computer, your page request is sent to the local node, and then your node sends the request to the test environment. Online with test code so you deployed on the server, the agent actually doesn’t work, then according to the writing above the actual request is actually ‘/ newretail/API/auth/login’, so we used axios packaging request need to determine:

letSwitch (env) {baseURL const env = process.env.node_envcase 'development':
    baseURL = ' '
    break
  case 'test':
    baseURL = 'http://l-test12.dev.cn2.corp.agrant.cn:8080'
    break
  case 'production':
    baseURL = 'http://webapi.prod.qd1.corp.agrant.cn:8080'
    break
}

export { baseURL }
Copy the code

or

let serverUrl = '/newretail/'// Local debugging //let serverUrl = 'http://l-test12.dev.cn2.corp.agrant.cn:8080/'// When the package deployment goes onlineexport default { 
  dataUrl: serverUrl + 'api/auth/login' 
}
Copy the code

Extended command line execution file (I this is to configure multiple cross-domain addresses, using commands to start different cross-domain addresses)

The process.argv property returns an array containing the command line arguments that started the Node.js process. The first element is process.execPath. See process.argv0 in the Node documentation for the value of argv[0]. The second element is the path of the currently executing JavaScript file. The remaining elements are other command line arguments. (Get command line parameters)

proxyTable: {
 '/newretail': {// // used"/newretail"To take the place of"http://l-test12.dev.cn2.corp.agrant.cn:8080"(Test) Target: process.argv.includes('--pro'// Determine whether the command line address is development or online.'http://webapi.prod.qd1.corp.agrant.cn:8080'// Local debug line address:'http://l-test12.dev.cn2.corp.agrant.cn:8080'// Headers: process.argv.includes('--pro')? {// Some backend processing requests will determine the source of the request and the referer, manually set to the online domain Origin:'http://retailx.cue.group',
  Referer: 'http://retailx.cue.group/'} : {}}}Copy the code

! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/2/26/170802578948d7a3~tplv-t2oaga2asx-image.image )