最近在学习Vue+element搭建一个后台管理项目。在实现跨域开发时踩过的那些坑。

1、开发环境下，如何做好跨域配置

    首先跨域我们要配置的文件有：config下的index.js

        dev: {

            proxyTable: {

                '/api': {

                        target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号

                        changeOrigin: true, //跨域

                        pathRewrite: {

                                   '^/api': '/' //这里理解成用‘/api’代替target里面的地址，

                                    后面组件中我们掉接口时直接用api代替

                                    比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，

                                    直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可

                                    在开发环境显示地址：http://localhost:9600//api/xxx/duty?time=2017-07-07 14:57:22

                                        } }

config/dev.env.js：

   module.exports = merge(prodEnv, {

                                    NODE_ENV: '"development"',//开发环境

                                    API_HOST:"/api/"

                                    })

跨域成功，但是这只是开发环境（dev）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题，

如我们部署的服务器端口是3001，需要前后端联调，第一步前端我们可以分生产production和开发development两种环境分别测试，

在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，开发环境中我们用上面配置的代理地址api，

生产环境下用正常的接口地址，所以这样配置，分别在config/dev.env.js和prod.env.js两个文件中进行以下配置。

生产环境配置：prod.env.js

    module.exports = {

                    NODE_ENV: '"production"',//生产环境

                    API_HOST:'"http://10.1.5.11:8080/"'

                    }

当然不管是开发还是生产环境都可以直接请求http://10.1.5.11:8080//。配置好之后测试时程序会自动判断当前是开发还是生产环境，然后自动匹配API_HOST，

我们在任何组件里都能用process.env.API_HOST来使用地址如：

instance.post(process.env.API_HOST+'user/login', this.form)

• 1

然后第二步后端服务器配置一下cros跨域即可，就是access-control-allow-origin：*允许所有访问的意思。

综上：开发的环境下我们前端可以自己配置个proxy代理就能跨域了，真正的生产环境下还需要后端的配合的。

某大神说：此方法ie9及以下不好使，如果需要兼容，最好的办法是后端在服务器端口加个代理，效果类似开发时webpack的代理。

1. axios发送get post请求问题 
   发送post请求时一般都要设置Content-Type，发送内容的类型，application/json指发送json对象但是要提前JSON.stringify()一下。application/xxxx-form指发送？
2. a=b&c=d格式，可以用qs.stringify()的方法格式化一下，qs在安装axios后会自动安装，只需要组件里import一下即可。

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}

const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
'Content-Type':'application/xxxx-form'}

• 1
• 2
• 3
• 4
• 5

1. 拦截器的使用 
   当我们访问某个地址页面时，有时会要求我们重新登录后再访问该页面，也就是身份认证失效了，如token丢失了，或者是token依然存在本地，但是却失效了，所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误，授权出错，也就是没有权利访问该页面。 我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

// http request 请求拦截器，有token值则配置上token值
axios.interceptors.request.use(
    config => {
        if (token) {  // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
            config.headers.Authorization = token;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 这里写清除token的代码
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}   //登录成功后跳入浏览的当前页面
                    })
            }
        }
        return Promise.reject(error.response.data) 
    });

下图是本人在Vue中踩过的一个坑：

这个是由于传递的HTTP参数格式有问题，本人查找了好久终于发现问题所在，原来是接口要求传递的参数封装body，由于初次接触，本人使用了params传递，造成requestbody为null。在传递参数是使用config.data即可成功传输。具体的请求报错信息本人从这里找到，最后终于解决掉：{"timestamp":1523978119930,"status":400,"error":"Bad Request","exception":"org.springframework.http.converter.HttpMessageNotReadableException","message":"Required request body is missing:

http含义：

http 200:-文件被正常的访问

http 302:临时重定向

 HTTP错误列表

HTTP 400 - 请求无效

HTTP 401.1 - 未授权：登录失败

HTTP 401.2 - 未授权：服务器配置问题导致登录失败

HTTP 401.3 - ACL 禁止访问资源

HTTP 401.4 - 未授权：授权被筛选器拒绝

HTTP 401.5 - 未授权：ISAPI 或 CGI 授权失败

HTTP 403 - 禁止访问

HTTP 403 - 对 Internet 服务管理器 (HTML) 的访问仅限于 Localhost

HTTP 403.1 禁止访问：禁止可执行访问

HTTP 403.2 - 禁止访问：禁止读访问

HTTP 403.3 - 禁止访问：禁止写访问

HTTP 403.4 - 禁止访问：要求 SSL

HTTP 403.5 - 禁止访问：要求 SSL 128

HTTP 403.6 - 禁止访问：IP 地址被拒绝

HTTP 403.7 - 禁止访问：要求客户证书

HTTP 403.8 - 禁止访问：禁止站点访问

HTTP 403.9 - 禁止访问：连接的用户过多

HTTP 403.10 - 禁止访问：配置无效

HTTP 403.11 - 禁止访问：密码更改

HTTP 403.12 - 禁止访问：映射器拒绝访问

HTTP 403.13 - 禁止访问：客户证书已被吊销

HTTP 403.15 - 禁止访问：客户访问许可过多

HTTP 403.16 - 禁止访问：客户证书不可信或者无效

HTTP 403.17 - 禁止访问：客户证书已经到期或者尚未生效

HTTP 404.1 - 无法找到 Web 站点

HTTP 404 - 无法找到文件

HTTP 405 - 资源被禁止

HTTP 406 - 无法接受

HTTP 407 - 要求代理身份验证

HTTP 410 - 永远不可用

HTTP 412 - 先决条件失败

HTTP 414 - 请求 - URI 太长

HTTP 500 - 内部服务器错误

HTTP 500.100 - 内部服务器错误 - ASP 错误

HTTP 500-11 服务器关闭

HTTP 500-12 应用程序重新启动

HTTP 500-13 - 服务器太忙

HTTP 500-14 - 应用程序无效

HTTP 500-15 - 不允许请求 global.asa

Error 501 - 未实现

HTTP 502 - 网关错误

错误码与状态码

     近来总有朋友咨询cPanel的Awstats中“HTTP错误码（HTTP Error codes）”的含义，以及是否需要关注和处理。

     关于Awstats请查看《CP How-To：如何使用cPanel查看站点统计数据（awstats）》

      文章地址：

http://bbs.netpu.net/viewthread.php?tid=694

      其实这是一个误会，在这里它应该是“HTTP状态码（HTTP Status codes）”。

      OK，既然是状态码，那么就可能有正确和错误两种状态了（至少不全是错误了，大大的松口气吧）。那么这些代码都代表什么含义呢？到底哪些是错误状态，哪些是正确状态呢？不要急，下边我冒充内行为大家做一个简单的介绍。

HTTP与Status codes

      HTTP可能大家都熟悉，就是超文本传输协议。浏览器通过HTTP与WEB Server通讯（也有一些其它软件比如IM使用HTTP协议传递数据），把我们的请求（HTTP Request）传递给服务器，服务器响应这个请求，返回应答（HTTP Response）以及我们需要的数据。大致就是这个样子了。

       如果我们请求啥，服务器就返回啥，是乎就不需要HTTP Status codes了。但是事情往往不是那么简单。比如我们请求一个网页页面，可是服务器不存在这个页面，或者这个页面被转移到其它地方，或者服务器禁止我们查看这个页面等等，所以为了便于浏览器处理这些正确与不正确的情况，HTTP用Status codes来表示请求（HTTP Request）在服务器端被处理的情况。Status codes通过应答（HTTP Response）返回给浏览器，浏览器根据这个作相应的处理。

HTTP Status codes的分类

      既然有正确和错误的状态，HTTP定义两大类状态码是不是就可以了？人家制订协议的可是专家（不象我是冒充的），想得比我们要周全，要长远。HTTP 1.1中定义了5大类Status codes，分别是：

Informational

       意义：信息

        范围：1XX

Successful

       意义：成功

        范围：2XX

Redirection

       意义：重定向

       范围：3XX

Client Error

       意义：客户端错误

       范围：4XX

Server Error

        意义：服务器错误

       范围：5XX

     您看看人家想得多周到啊，真专家就是真专家。

常见HTTP Status codes简介

     下面简单介绍一下我们经常碰到的HTTP Status codes。

     也许是我孤陋寡闻，常遇到的HTTP Status codes就那么几个，见笑啦。

Successful

        200 - OK：OK

        这个是最常见的啦（也许我们不会直接看到，但是如果您使用一些抓包工具，大多数http应答中都有这个）。意义很简单，就是说服务器收到并理解客户端的请求而且正常处理了。

        206 - Partial Content：部分内容。

       这个也经常发生。很容易让大家发懵。

        通俗点说就是如果客户端请求文档（图像，文本，声音等等）的部分内容，服务器正常处理，那么就返回206。大致意思就是它请求的时候，除了指定请求的内容，还指定了偏移量以及长度。

       部分内容，没搞错吧？呵呵没搞错，现在很多浏览器以及软件支持断点续传就是靠这个的。呵呵，以后看到206不要怕了。

Redirection

        301 - Moved Permanently：永久移动。

        这个状态码是指客户端要请求的资源已经被永久的转移到一个新的地方了。这个应答（HTTP Response）里边同时包含了资源的新地址。它告诉客户端，如果下次还想要这个资源，那么就用新的地址去取。

        302 Found：临时重定向。

       这个状态码是指客户端要请求的资源临时放到一个新地方了。同样，应答中也包含了资源的新地址。

        307 - Temporary Redirect：临时重定向。（如果不去实现协议或者做相关开发，我们大致理解它很302差不多就可以啦）

Client Error

        400 - Bad Request：错误请求

       就是请求的语法错误，服务器无法理解。

        401 – Unauthorized：未授权

       当服务器返回401 Code，就是告诉说客户端访问指定资源以前，必须通过服务器的授权。

        403 – Forbidden：禁止访问

        就是不允许访问某些资源。

        404 - Not Found：找不到

       找不到客户端请求的内容

Server Error

        500 - Internal Server Error

        服务器内部错误。

结束语

        越写越懒，所以就简简单单写这么多啦。没有啥大用处。如果能消除一两位关于这方面朋友的疑虑，就足以令我欣慰了。既然之前都说过是冒充内行，所以有错漏之处在所难免，还望大家不吝赐教。

        需要深入研究这方面内容的朋友，千万不要看这篇文章，以免被此文误导。请学习官方的协议内容。

        官方的资料地址:

源文档 <http://www.51testing.com/?134114/action_viewspace_itemid_99305.html>

http error codes

400 invalid syntax. 语法问题

401 access denied. 访问拒绝

402 payment required. 必须完整

403 request forbidden. 请求被禁止

404 object not found. 对象没有找到

405 method is not allowed. 方法不允许

406 no resp acceptable to client found. 客户端没有响应

407 proxy authentication required. 代理需要验证

408 server timed out waiting for request. 等等请求时服务器断开连接

409 user should resubmit with more info. 有冲突用户应该进行检查

410 resource is no l available. 资源不可用

411 server refused to accept request without a length. 服务器拒绝接受没有长度的请求

412 prec given in request failed. 放