Axios如解决跨域问题

首先在Vue-CLI根目录下创建一个名为 vue.config.js 的js文件

        在vue.config.js中文件的配置如下:

module.exports = {
  publicPath: "/",
  devServer: {
    proxy: {
      "/api": {
        // 代理名称   凡是使用/api开头的地址都是用此代理
        target: "http://localhost:4000/", // 需要代理访问的api地址
        changeOrigin: true, // 允许跨域请求
        pathRewrite: {
          // 重写路径,替换请求地址中的指定路径
          "^/api": "/", // 将请求地址中的/api替换为空,也就是请求地址中不会包含/api/
        },
      },
    },
  },
};

Axios 本身并不能解决问题,但是可以通过设置请求头或者使用代理服务器等方式来减少问题的影响。常见的解决方法有以下几种: 1. 通过在请求头中添加 Origin 字段来进行请求。在发送请求时,浏览器会自动在请求头中添加 Origin 字段,该字段包含了当前页面的来源地址。如果服务器允许请求,可以在响应头中添加 Access-Control-Allow-Origin 字段,来指定允许访问的来源地址。 ```javascript axios.get('http://example.com/api/data', { headers: { Origin: 'http://yourdomain.com' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 2. 通过使用代理服务器来进行请求。在同源策略下,浏览器只能向同一名下的服务器发起请求,但是可以通过在自己的服务器上设置一个代理服务器,将请求转发到目标服务器上,然后再将结果返回给浏览器。 ```javascript axios.get('/api/data', { baseURL: 'http://yourproxy.com', }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 3. 通过设置服务器端的响应头来允许访问。例如在响应头中添加 Access-Control-Allow-Origin: *,表示允许任意来源访问。 需要注意的是,请求仍然存在安全风险,因此应该根据具体情况,采取合适的方式来减少请求的影响。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值