跨域的配置

最新推荐文章于 2025-06-13 16:13:48 发布

YogLn

最新推荐文章于 2025-06-13 16:13:48 发布

阅读量6.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue proxy

本文链接：https://blog.csdn.net/qq_43488547/article/details/115416397

前端专栏收录该内容

18 篇文章

订阅专栏

1.什么是跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

注意：跨域限制访问，其实是浏览器的限制

同源策略：是指协议，主机（域名），端口都要相同，其中有一个不同都会产生跨域；

2. 跨域的解决方法

方式一：jsonp

jsonp (JSON With Padding) 就是打包在函数中调动的json,或者包裹的json
json 是一种数据格式；jsonp是一种数据调用方式

//json
{
  "name":"小明"
}

//jsonp
callback({
 "name":"小明"
})

方式二：CORS

CORS 跨域资源共享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

1、普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

2、带cookie跨域请求：前后端都需要进行设置

cors背后的基本思想是,使用自定义的HTTP头部允许浏览器和服务器互相了解对方，从而决定请求和响应成功与否。

以nodejs的koa框架为例子

app.use(async (ctx, next)=> {
  ctx.set('Access-Control-Allow-Origin', '*');
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  if (ctx.method == 'OPTIONS') {
    ctx.body = 200; 
  } else {
    await next();
  }
});

方式三：前端配置反向代理

在vue.config.js中配置如下

// 配置基本都是写死的
module.exports = {
  // 修改的配置 配置proxy 服务器代理
  devServer: {
    proxy: {
      // 如果请求的地址是以 /api 开头就会请求到'http://121.4.103.100',
      '/api': {
        target: 'http://121.4.103.100',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' //请求的时候api会被替换成''
        }
      }
    }
  }
}

直接使用/api/xxx/xxx的uri调用接口即可代理会将/api进行替换/src/main.js`

import axios from 'axios';
import VueAxios from 'vue-axios'

// 接口代理时配置的URL，即需要替换的/api
axios.defaults.baseURL = '/api';
axios.defaults.timeout = 8000;

Vue.use(VueAxios, axios);