JS跨域问题

最新推荐文章于 2024-07-16 00:30:57 发布

snowcarry

最新推荐文章于 2024-07-16 00:30:57 发布

阅读量272

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/sinat_38741770/article/details/104237666

版权

同源策略（浏览器的安全策略）—》跨域

如果非同源，共有三种行为受到限制。

Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
Ajax 请求不能发送。

解决跨域

jsonP

原生
jQuery实现，express实现

修改请求头：cors

代理

http-proxy-middleware（自动代理）

首先导入中间件：

npm i http-proxy-middleware --save

创建一个option.js:

module.exports = {
    target: "http://127.0.0.1:3000",
    changeOrigin: true,
    pathRewrite: {
        '^/api': '/', //rewrite path
    }
}

打开app.js，在里面写入：

//代理转发
const proxy = require("http-proxy-middleware");
const options = require("./util/options");
//这句代码必须放在var app = express();之后
app.use("/api", proxy(options));

如果可以的话可以把以下代码放在这几行代码之前


app.use(logger('dev'));
app.use(express.static(path.join(__dirname, 'public')));

request/request-promise（手动代理）

如果要将代理服务器转发到主服务的数据先进行处理，可以使用手动代理
安装第三方库：

npm i request --save
npm i request-promise --save

然后打开路由层js文件,写入以下代码：

var rp=require("request-promise");

/* GET users listing. */
router.get('/',async function(req, res, next) {
  const {username,password}=req.query;
  const data=await rp({
    method:"GET",
    uri:'http://localhost:3000/users/',
    body:{username,password},
    json:true,
  })
  console.log(data);
  res.send(data);
});

然后代理服务器获取数据发送ajax:

export default {
    getUsers: (user) => new Promise(resolve => {
        $.ajax({
            url: '/users/',
            data:user,
            type: "get",
            success(data) {
                resolve(data);
            }
        })
    })
}