[跨越5种解决方案] 浏览器安全协议 vonfig.js cors库 配置请求头 nginx

1.浏览器禁用安全协议

如果两个地址的  协议, 地址,端口 三者任何一个不一样  发送ajax请求就会发生跨域的行为

在公司开发的过程中, 只需要自己给浏览器设置特定的字段,禁用了他的安全协议就可以任意访问

在原始桌面浏览器上面  右键新建快捷方式, 然后再上面右键 查看属性; 然后再属性的目标位置, 加上一个空格,再接上下面的一段话;  并且要在c潘下面创建 一个下面的目录
   --disable-web-security --user-data-dir=C:\MyChromeDevUserData

2. vue.config.js

    // 设置代理
    module.exports = {
      devServer: {
        open: true,
        port: 9000,
        proxy: {
          '/api': {
            target: 'http://localhost:3000',
            changeOrigin: true,
            wx: true,
            pathRewrite: {
              '^/api': '',
            },
          },
        },
      },
    };
    
    // 这个里面基本上可以配置所有webpek的配置
    对于想进行base64 编码的 图片大小设置
    { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }

3. cors库

app.use(cors())  针对于所有域名,不好,不能使用cookies, 一般要写具体的域名
app.use(cors({origin: "http://localhost:8080"}))

4. 配置请求头

    Access-Control-Allow-Origin   是允许跨域的域名
    Access-Control-Allow-Methods  是允许的请求方式 (简单请求指的是GET POST HEAD)
    Access-Control-Allow-Headers  跨域允许包含的头,指定浏览器CORS请求会额外发送的头信息字段
    Access-Control-Allow-Credentials  true   表示是否允许发送Cookie, 只能设置为true,  这个要对应前端库例如 axios 开启 withCredentials属性
    
    app.all('*', function (req, res, next) {
      res.header('Access-Control-Allow-Origin', 'http://localhost:9000');
      next();
    });
    
    
    response headers  后端传递到前端的请求头
    request headers  这个是前端传递给后端的请求头

5.nginx代理

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值