Vue--使用vue-cli解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

原文网址：Vue--使用vue-cli解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍Vue如何解决跨域问题：No 'Access-Control-Allow-Origin' header is present on the requested resource。

        本文介绍vue-cli方案。本配置方法跟webpack的dev-server一样（除了配置位置不一样以外）。

官网网址

跨域配置（@vue/cli官网）

axios官网：GitHub - axios/axios: Promise based HTTP client for the browser and node.js

原因分析

        此问题是由跨域导致的：No 'Access-Control-Allow-Origin' header is present on the requested resource。如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。

解决方案

简介

        可以通过 vue.config.js 中的 devServer.proxy 选项来配置。devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

        这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

        如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

示例

module.exports = {
    devServer: {
        proxy: {
            '/': {
                target: 'http://localhost:9000/',
                // ws: true,
                changeOrigin: true
            }
        }
    }
}

注意事项

配置http格式

简介

        axios 发送请求时的数据默认是 JSON 格式的。这是导致用 axios POST 跨域出错的主要原因。

        根据 CORS 的标准，当浏览器发送跨域请求时，如果请求不是GET或者特定POST（Content-Type只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain的一种）时，强烈要求浏览器必须先以 OPTIONS 请求方式发送一个预请求(preflight request)，从而获知服务器端对跨源请求所支持 HTTP 方法。使用 axios 直接发送 POST 的跨域请求，如果web后端对 OPTIONS 的响应有问题，就会报错。

        用 axios 解决跨域的方案和你类似，不过是先把 params 转换为字符串格式了，见上边的官方用x-www-form-urlencoded格式的说明。

实例： post方法使用application/x-www-form-urlencoded格式

1.设置 headers:{ 'Content-type': 'application/x-www-form-urlencoded'}

axios.post('url',data,{headers:{ 'Content-type': 'application/x-www-form-urlencoded'}})

// 不想在每次请求都设置的话，可以集中设置下
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

2.使用qs

仅仅第一步并没有达到想要的效果，post的body主体中还是{"age":10}这样的格式，并不是我们想要的query参数。引入Qs，这个库是axios里面包含的，不需要再下载了 

import qs from 'qs';
import axios from 'axios';

let reqUrl = 'http://xxx.com';
let reqParams = {
    name: 'aaa'
};
axios.post(url, qs.stringify({
    params: reqParams
})).then(response => {
    console.log(response);
})

跨域的cookie丢失

axios默认是不让ajax请求头部携带cookie的，设置 axios.defaults.withCredentials = true 即可

其他网址

vue-cli-service--使用/教程_IT利刃出鞘的博客-CSDN博客_vue-cli-service

使用Vue的axios vue-resource跨域不成功 但原生xhr就可以 - SegmentFault 思否
vue中使用axios的多种方式 - 简书