vue解决前端跨域问题

最新推荐文章于 2024-07-24 13:30:37 发布

xyx107

最新推荐文章于 2024-07-24 13:30:37 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签： Vue2.0前端跨域配置 CORS option请求

本文链接：https://blog.csdn.net/xyx107/article/details/104385053

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

参考：阮一峰https://www.ruanyifeng.com/blog/2016/04/cors.html

由于XHR请求只能访问同一个域中的接口或资源，为了实现跨域通信，可以使用jsonp,ifram,CORS，nginx代理跨域，nodejs中间件跨域等。

一、通过jsonp跨域

因为html页面通过相应的标签可以加载其他域的静态资源，苏亦可以动态的创建script,请求带参网址，实现跨域。带参数的请求只适应于get请求，如

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.a.com/login?username=admin&callback=handlecallback'
//传递一个回调函数给后端，方便后端执行这个回调函数
document.head.appendChild(script);

function handlecallback(res){
    alert(JSON.stringify(res));
}

vue实现

this.$http.jsonp('http://a.com/login',{
params: {},
jsonp: 'handlecallback'
}).then(res => {
sonsole.log(res)
})

二、通过CORS跨域

CORS即跨域资源共享。CORS在服务器响应报文制定一个跨源首部（Access-Control-Allow-Oringin），就可以绕过同源限制。HTTP请求分为简单请求和复杂请求。

简单请求：

需要同时满足三个条件，1、属于GET,POST,HEAD请求，2、请求头只能添加Accept,Accept-language,content-type，Content-Language,Last-Event-ID,3、content-type只能取application/x-www-form-urlencoded、multipart/form-data、text/plain。简单请求的流程是：浏览器直接发出CORS请求，在请求头增加一个Origin字段，如果Origin指定的域名在许可范围（Access-Control-Allow-Oringin规定的）内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin: * //允许访问的域（*代表所有的）
Access-Control-Allow-Credentials: true  //允许发送cookie（允许的话允许访问的域必须明确指明哪个域）
Access-Control-Expose-Headers: Username   //允许添加的头部字段
Content-Type: text/html; charset=utf-8  //允许的content-type格式

复杂请求：

不满足简单请求的，如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json就是复杂请求。

客户端发出复发请求时会受到同源策略限制，此时浏览器会先向服务器发送option预验请求（preflight），请求包含了

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0..

服务端就收到预验证请求后，检验符合跨域的要求，就会返回返回一个响应，

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

客户端接收到响应之后就可以正式发请求了。如果服务器不同意预检请求，请求头里不会携带CORS相关信息，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息

浏览器同源策略。

同源：如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。

http://store.company.com/dir/page.html,此地址同其它地址同源检测：

http://store.company.com/dir/inner/another.html，同源，仅路径不同

https://store.company.com/secure.html,不同源，协议不同

http://store.company.com:81/dir/etc.html,不同源，端口不同

http://news.company.com/dir/other.html，不同源，域名不同

同源策略：同源策略控制了不同源之间的交互，例如在使用XMLHttpRequest 或 <img> 标签时则会受到同源策略的约束。

COFS跨域资源共享：使用额外的 HTTP 头来告诉浏览器让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。安全原因，浏览器限制从脚本内发起的跨源HTTP请求或者跨站请求可以正常发起，但是返回结果被浏览器拦截了。

跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。

2.Vue2.0跨域访问的一些操作

1.修改config路径下的index.js文件

dev: {

    env: require('./dev.env'),

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

      '/api': {

        target: 'http://xxx.com',  //要请求的跨域地址

        changeOrigin: true,  //开启跨域

        pathRewrite: {

            '^/api': ''  
//重命名/api相当于http://xxx.com，设置之后/login相当
//于http://xxx.com/login,

        }

      }

    },

    host: 'localhost', 

    port: 8080, // 本地

    autoOpenBrowser: false,

    errorOverlay: true,

    notifyOnErrors: true,

    poll: false,

2.request.js文件

const service =axios.create({

    baseURL: 'http://xxx.com',  //要请求的跨域地址

    timeout: 1000,

});

3.api.js，此处应该注意返回data的格式，不然会出错

export function Login() {
    service.request({
        method: "post",
        url: '/login',
        Username: '', //可以在这里添加自定义的字段，需要后端允许。
        data: {}
    })
}