Access to XMLHttpRequest at 'http://localhost:3000/xxx' from  origin 'http://localhost:9588' has been blocked by CORS policy 

android 跨域调用 安卓 跨域_跨域

出现上面这个错误,就表示,遇到的是跨域的问题

那,首先来说说,什么是跨域问题

 跨域是指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域

就好比:在A地址

（发起请求的页面地址）向B地址（要请求的目标页面地址）发起请求时，

如果A地址和B地址在： 协议 域名 端口  不全相同，则说明请求是跨域的；

跨域请求是非常常见的现象！ 因此,不用特别烦恼

解决方法

  • 前端用JSONP方式去发请求（jsonp不是ajax请求）
  • 后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错
  • 代理转发

android 跨域调用 安卓 跨域_跨域_02

总结 

浏览器发起跨域请求是很常见的；

跨域请求报错的原因是： 浏览器同源策略 && 请求是ajax类型  && 请求确实跨域了

跨域-Vue-Cli配置代理转发

android 跨域调用 安卓 跨域_android 跨域调用_03

思路：

在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：

  1. 代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求
  2. 代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

vue-cli解决跨域配置说明

在vue.config.js配置文件中，

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

 .env.development

# VUE_APP_BASE_API = 'http://localhost:3000/api'  (这句不要了)
VUE_APP_BASE_API = '/api'

api/user.js

export function login(formData) {
  return request({
//  url: 'api/sys/login',
+   url: '/sys/login', // 前面的api就省略了
    method: 'POST',
    data: formData
  })
}

 注意

修改了配置文件,一定要重启项目

总结

  1. vue-cli集成了跨域代理功能------ 只能用在开发阶段。
  2. vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。

要强调一点

        ajax的基地址baseUrl必须是相对地址，而不能是绝对地址

android 跨域调用 安卓 跨域_前端_04