Solution of cross domain problems

Cross-domain problem

Understand cross domain issues

On safety grounds , The browser requires that your website cannot be executed / Visit resources on other websites

Cross domain impact

• Browser local storage cannot be used
• DOM object ,JS Object cannot get
• AJAX Can't use

Cross domain problem solving

• utilize HTML The characteristics of the label script,a,iframe,img,link etc.
• Use agents on the front end to solve
• Solve in the server section
  CORS - Cross-domain resource sharing , Solve this problem by adding response header information

stay Vue.js To solve

1. porxy agent

 newly build vue.config.js
// Node.js The modules inside 
module.exports = {
    // http://localhost:8080/api/test
    // =>
    // http://localhost:8000/test
  
    devServer: {
      proxy: {
        '/api': {
          // target: 'http://localhost:8000',
          target: 'http://django.t.mukewang.com',
          changeOrigin: true,
          pathRewrite: { 
            // '^/api': ''   // need rewrite Rewrite the URL
          },
          '/test': {
            // target: 'http://localhost:8000',
            target: 'http://localhost:9527',
            changeOrigin: true,
            pathRewrite: { 
              '^/test': ''   // need rewrite Rewrite the URL
            }
          }
        }
      }
    }
  }

2. adopt axios To achieve send access ：

stay main.js Import installed axios, And mount it on the prototype

import { ajax } from '@/utils/ajax'

export default {
  name: 'Home',
  components: {
  },
  created () {
    // ajax.get('http://django.t.mukewang.com/api/system/slider/list/?types=11')
    ajax.get('http://localhost:8080/api/system/slider/list/?types=11').then(resp => {
      console.log(' The result returned ：', resp)
    }).catch(err => {
      console.log(' Request error ：', err)
    })
  }
}

stay Django Solve cross domain problems in