使用vue,axios开发下的跨域设置(状态码200,返回数据了,但是浏览器拦截并报错)

本人菜鸟学徒一只,在学习前端过程中踩了不少坑,几天就遇到了用vue,axios写项目时的坑,在请求聚合数据接口的时候,明明用get方式请求成功,json数据也返回到后台了,偏偏控制台报错,提示"Access-Control-Allow-Origin"";

网上找了一个天,各种方法都试过,都不奏效,熬到凌晨3点终于找到了解决方法:

import Axios from "axios"; // 引入axios

Vue.prototype.$ajax = Axios; //挂载axios插件的方法

我的webpack配置文件是webpack.config.js,在配置中添加

proxy: {
   "/api": {
      target: "此处写要访问的API域名,如:

http://v.juhe.cn/toutiao/index",

changeOrigin: true, pathRewrite: {"^/api": ""} }}

然后在需要访问API的vue文件中这样写

this.$ajax.get("/api" + url) // url格式,如:?type=xxx&key=value

  .then(res => {

console.log(res); }) .catch(err => { console.log(err); })

this.$ajax.post("/api" + url,{

   headers: {"Access-Control-Allow-Origin": "*",}
})

.then(res => { console.log(res); }) .catch(err => { console.log(err); })

成功返回数据:

1. {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
   1. config:{adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
   2. data:{reason: "成功的返回", result: {…}, error_code: 0}
   3. headers:{date: "Fri, 06 Apr 2018 19:23:31 GMT", etag: "3af2b8bbb189b4c22cd9a06e6edd0255", connection: "close", x-powered-by: "Express", transfer-encoding: "chunked", …}
   4. request:XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
   5. status:200
   6. statusText:"OK"
   7. __proto__:Object

希望能给遇到和我一样问题小伙伴们一点帮助,文笔粗陋,谅解!