swiper --- h5 cross-domain solutions

swiper --- h5 carousel plugin

 

Reverse Proxy

A: Description

• Solve the problem of cross-domain method:

  • JSONP ==> only way to get treatment

  • CORS ==> to handle their own server

  • The reverse proxy ==> also very common

• Explanation

  1. Demonstrate cross-domain issues

  2. Reverse proxy principle

  3. Project scaffolding vue-cli-generated how to use a reverse proxy

II: demonstrate cross-domain issues

The real test request interface: https://api.douban.com/v2/movie/in_theaters

1. In todo-vuexjs code in the demonstration area in app.vue

2. Installation axios

3. Code:

   Demo cross-domain problem // 
   / * * eslint-disable / 
   Import Axios from 'Axios'; . Axios GET ( . 'Https://api.douban.com/v2/movie/in_theaters') the then ( RES => { Console. log ( RES) })
   
   
    
   

    

4. Error:

   Access to XMLHttpRequest at 'https://api.douban.com/v2/movie/in_theaters' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

5. The reason given

   - project run in   HTTP: // localhost: 8080 // the I IS running the Application Your here Wallpaper: HTTP: // localhost: 8080   - send ajax request: // domain name is https://api.douban.com/v2/movie/ in_theaters - appear cross-domain issues
    
   
   

    

III: reverse proxy principle

 

Four: demo

• Modify config/index.jsthe configuration file

 proxyTable: { '/ MyAPI': { // proxy server address of the target // https://api.douban.com/v2/movie/in_theaters // / MyAPI / Movie / in_theaters target: 'HTTPS: // API. douban.com/v2 ', pathRewrite: { ' ^ / MyAPI ': ' '}, // set HTTPS Secure: to false, // must set the changeOrigin: to true     }   },
     
       
       
       
       
       

       
       
       
       

• The final code

  // axios.get('https://api.douban.com/v2/movie/in_theaters').then(res => {
  axios.get("http://localhost:8080/api/movie/in_theaters").then(res => {
   console.log(res);
  });

• The final configuration cli2.x:

   proxyTable: { '/ MyAPI': { // proxy server address of the target // https://api.douban.com/v2/movie/in_theaters // / MyAPI / Movie / in_theaters target: 'HTTPS: // API. douban.com/v2 ', pathRewrite: { ' ^ / MyAPI ': ' '}, // set HTTPS Secure: to false, // must set the changeOrigin: to true     }   },
       
         
         
         
         
         
  
         
         
         
         
  
  

• The final configuration 3.X

  • Create a root directory vue.config.js

  • Copy the following code

  Module1. Exports = { devserver: { Proxy: { '/ MyAPI': { // proxy server address of the target // https://api.douban.com/v2/movie/in_theaters // / MyAPI / Movie / in_theaters target : 'https://api.douban.com/v2', pathRewrite: { '^ / MyAPI': ''}, // set HTTPS Secure: to false, // must set the changeOrigin: to true     }   } } } # use Axios. GET ( . 'HTTP: // localhost: 8080 / MyAPI / Movie / in_theaters') the then ( RES => { . Console log ( RES) }) Axios.
   
     
       
         
         
         
         
         
  
         
         
         
         
  
  
  
  
  
  
  
   
  
  get('/myapi/movie/in_theaters').then(res => {
   console.log(res)
  })
  ​

   

• Restart : npm run dev

•