跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin

场景:前端跟后台联合开发的时候,在局域网内,浏览器访问别人的地址可以获取数据,但是通过接口请求,就会跨域

解决方法:现在是vue项目,用axios请求,前端这边单独解决这个问题,不需要后端处理

第一、找到config/index.js

         设置proxyTable,实际上就是设置代理路径(PS:设置config文件之后,需要重新npm run dev)

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
         '/api': {
              target: '请求地址ip加端口',
              changeOrigin: true,
              pathRewrite: {
                '^/api': '/' 
              }
            }
    },
  }

第二,新建一个封装axios的文件,如 src/api/index.js,如果不封装,上面的代理将不能识别,原因暂时不知,

            里面就是封装的接口方法

//输出通用axios实例
import axios from 'axios';

const instance = axios.create({
  timeout: 10000,
   headers: {
    'Content-Type': "application/json;charset=utf-8"
  }
});

export default {
  userLogin ( data ) {
    return instance.post('/api/user/login', data);
  },
  allUser () {
    return instance.post('/api/user');
  },
  allProduct () {
   return instance.post('/api/product')
  },
  upload (data) {
    return instance.post('/api/upload',data)
  },
  regist (data){
  	return instance.post('/api/createOrUpdateUser',data)
  }
};

第三、在main.js引用

           import instance_ from './api/index';

           Vue.prototype.instance = instance_  //axios实例

第四,就可以调用自己定义的接口了,如

this.instance.regist({             
     userId: '',       
     userName: this.username,        
 }).then(res=>{
     console.log("sd")
 }).catch(function (error) {
     console.log(error);
 });

最后,最近开发了小程序,若是有兴趣可以扫码关注一下,撩妹把妹脱单秘籍

一个是恋爱聊天脱单话术

一个是有逼格有深度的朋友圈素材文案

  • 19
    点赞
  • 112
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
跨域问题是由于浏览器的同源策略导致的,同源策略要求网页只能访问与其来源相同的资源。当一个网页向不同源的服务器发送请求时,浏览器会进行跨域检查,如果服务器没有正确配置跨域访问的响应头,就会出现"Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource"的错误。 解决这个问题的方法有多种,下面是两种常见的解决方案: 1. 在服务器端配置响应头信息,允许跨域访问。在服务器端的响应头中添加"Access-Control-Allow-Origin"字段,并设置为允许访问的域名或"*"(表示允许任意域名访问)。 示例代码如下(以Node.js为例): ```javascript // 设置允许跨域访问的响应头 res.setHeader('Access-Control-Allow-Origin', '*'); ``` 2. 使用代理服务器进行请求转发。在项目中配置一个代理服务器,将跨域请求转发到目标服务器,这样就可以绕过浏览器的同源策略限制。 示例代码如下(以Vue.js为例): ```javascript // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 目标服务器地址 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '' // 将请求路径中的/api前缀去掉 } } } } }; ``` 这样,当你在前端代码中发送请求到"/api"路径时,代理服务器会将请求转发到目标服务器,并将响应返回给前端,从而解决跨域问题

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值