swiper---h5 跨域解决办法

swiper---h5  轮播插件

 

反向代理

一 : 说明

• 解决跨域问题的方式 :

  • JSONP == > 只能处理 get 方式

  • CORS ==> 处理自己的服务器

  • 反向代理 ==> 也很常用

• 说明

  1. 演示跨域问题

  2. 反向代理的原理

  3. 脚手架vue-cli 生成的项目中如何使用反向代理

二 : 演示跨域问题

测试真实请求接口 : https://api.douban.com/v2/movie/in_theaters

1. 在 todo-vuex 里的 app.vue 中 的js 代码区域演示

2. 安装 axios

3. 代码 :

   // 演示跨域问题/* eslint-disable */import axios from 'axios';​axios.get('https://api.douban.com/v2/movie/in_theaters').then(res => { console.log(res)})

    

4. 报错 :

   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. 报错原因

   - 项目运行在  http://localhost:8080 // I Your application is running here: http://localhost:8080  - 发送ajax请求 : //域名是 https://api.douban.com/v2/movie/in_theaters- 出现跨域问题

    

三 : 反向代理的原理

 

四 : 演示

• 修改 config/index.js 配置文件

 proxyTable: {     '/myapi': {       // 代理的目标服务器地址       // https://api.douban.com/v2/movie/in_theaters       // /myapi/movie/in_theaters       target: 'https://api.douban.com/v2',       pathRewrite: { '^/myapi': '' },​       // 设置https       secure: false,       // 必须设置该项       changeOrigin: true    }  },

• 最终代码

  // 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);});

• 最终配置 cli2.x :

   proxyTable: {     '/myapi': {       // 代理的目标服务器地址       // https://api.douban.com/v2/movie/in_theaters       // /myapi/movie/in_theaters       target: 'https://api.douban.com/v2',       pathRewrite: { '^/myapi': '' },​       // 设置https       secure: false,       // 必须设置该项       changeOrigin: true    }  },

• 最终配置 3.X

  • 根目录下 新建一个 vue.config.js

  • 拷贝如下代码

  module.exports = { devServer: {   proxy: {     '/myapi': {       // 代理的目标服务器地址       // https://api.douban.com/v2/movie/in_theaters       // /myapi/movie/in_theaters       target: 'https://api.douban.com/v2',       pathRewrite: { '^/myapi': '' },​       // 设置https       secure: false,       // 必须设置该项       changeOrigin: true    }  }}}​# 使用axios.get('http://localhost:8080/myapi/movie/in_theaters').then(res => { console.log(res)})axios.get('/myapi/movie/in_theaters').then(res => { console.log(res)})​

   

• 重新启动 : npm run dev

•  

来源：https://www.cnblogs.com/licchang/p/12590692.html